Can i change asp.net button width dynamically based on text length
I have several styles like button_50 where the width is 50px, button_75 where the width is 75px, etc ...
Is there a way to dynamically generate the button length based on the text length, so I probably just need to create one style button and I can apply it to any button and it will shrink or stretch to the length of the text.
Here is my asp.button declaration:
<asp:Button ID="btnReset" runat="server" Text="Reset" OnClick="btnReset_Click"/>
Here are some styles in which I have a small image that I want to expand and shrink depending on the length of the text.
.test_button
{
background: url(../images/test/grey-left.png) top right left bottom;
background-repeat:no-repeat;
border-style: none;
font-family: Arial,Helvetica,Sans-Serif;
height: 23px;
}
I added the top right bottom left to the class and zoomed in the image. How can I apply 4 different images to each background position of the button so that I can have some sort of gradient, for example, instead of the same button for the top right bottom bottom.
a source to share
Your changes made it clear what you want a lot from when I first answered.
Each element can only have one background image *. The solution is to have multiple background images in order to have multiple HTML elements:
<span class="fake_button">
<span>
<span>
<input type="submit">
</span>
</span>
</span>
Then in your CSS add an image to a different corner of each one.
It's not easy or pretty, but it's the only way to have multiple background images.
* I think some of the nightly builds of Safari and Firefox can do this, but I suspect this is not what is being asked.
a source to share
Just don't set the width.
Update
As noted in the comments, the case is using an image, possibly as a background.
The only thing I can think of for image buttons that resize dynamically is to use separate images as trailing elements for the left and right buttons, then a background image that can either repeat itself or is large enough to accommodate all sizes. This would limit how the center image freezes at the end, perhaps at best you can use a top-down gradient.
An alternative could be to use a css / javascript package / method like SpiffyCorners .
If you are trying to stretch an image, you run the risk of pixelation and have to use an estimate of the font width, for example you can get from the Print or Font API. This would be very error prone due to the risk of not all clients having the same fonts.
a source to share
You can do it on PageLoad with a loop like this:
// set default length
string cssclass = "button_25";
int text_length = button.Text.Length;
int[] sizes = {50, 75};
for (int x = 0; x < sizes.Length; x++)
{
if (text_length > sizes[x])
cssclass = "button_" + sizes[x].ToString();
else
break;
}
button.CssClass = cssclass;
a source to share
You can keep your source clean by adding rounded corner functions via CSS for browsers that understand it (plus a bg gradient image or whatever) and use JS for browsers that don't.
for ff / sf / op just use
button{
background: #ccc (../path/img.gif) left bottom;
-moz-border-radius: 6px;
-webkit-border-radius:6px;
border-radius: 6px;
}
then for IE include a js snippet to wrap the button with spaces and apply the style via css. there are jquery plugins to do this for you if you are not inclined to manually roll.
a source to share
Try CSS3PIE. It will make your life easier ... Take a look at my bolg page:
Internet Explorer 6-8 has no CSS border. How do I make rounded corners?
Hooray!
Roberto.
a source to share