Can I change the width of an asp.net button dynamically based on the length of text

Question

I have multiple styles such as button_50 where the width is 50px, button_75 where the width is 75px, and so on...

Is there a way to dynamically generate the length of the button based upon the length of the text, so I probably would just have to create one style like button and I can apply that to any button and it would shrink or stretch based on the length of the text.

Here is my asp.button declaration:

<asp:Button ID="btnReset" runat="server" Text="Reset" OnClick="btnReset_Click"/>

Here is some styling in which I have a small image that I want to be able 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 left bottom to the class and that expands the image across. How can I apply 4 different images to each background position of the button so I can have a sort of gradient for example instead of the same button for top right left bottom.

Answer 1

<asp:button> outputs <input type="submit"> (give or take a few attriubutes)

In the absence of other styling, a submit button like this should just expand to fit it's text. Perhaps you should look at what is stopping this happen.

Answer 2

Just don't set the width.

Update

As noted in comments, the case is using an image, probably as background.

The only things I can think of for image buttons that dynamically resize is using using separate images as end-caps for the left and right of the button, then a background image that either can repeat or is big enough to account for all sizes. This would have the limitation of how the center image fades into the ends, probably at best you could use a top to bottom gradient.

An alternative would be to use css/javascript package/method such as SpiffyCorners.

If you try to stretch an image, you risk pixelation and you would have to use an estimation for font width such as you could get from a printing or font API. This would be very error prone due to the risk of not all clients having the same fonts.

Answer 3

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;

Answer 4

Your changes have clarified what you want a lot from when I first replied.

Each element can have ONE background image only*. The solution is to having multiple background images is 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 different corner of each one.

It's not simple or pretty but it's the only way of having multiple background images.

*I think some of the nightly builds of Safari and Firefox can do this but I suspect this isn't what is being asked about.

Answer 5

You can keep your source clean by adding the rounded corner functionality via CSS for browsers that understand it (plus the gradient bg image or whatever) and using 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 snippet of js to wrap the button with spans and apply the styling via css. there are jquery plugins a plenty to do this for you if you're not inclined to hand roll.