How To Make Automatic Adjustment Of Text Button

Hi I am using twiiter bootsrap 2.6 for my web app.As you can see in the user tab of this fiddle This finalhhhhhhhhhhhhhhhhhhh causes increase of the width of the button which also

Solution 1:

So you want to decrease font size based on text length?

If so, I recommend firstly set your button width to a fixed pixel width with css. This way your button will not jiggle. Then on every text change you can create another button (without fixed width), set new text, measure it's width, then in loop decrease font size by a minimal unit (em vs px) until button width is within needed parameter. Then delete the newly created button and set your first button's font size to the one you've just calculated. This operation will happen really fast and user will not see it, jquery uses this trick to calculate some sizes as well.

PLEASE SEE FIDDLE IN THE COMMENTS BELOW

... But imo there are better UI solutions to this:

1. Truncate button text to max allowed characters + … and set "alt" attribute to full text.
2. Make text scroll in button right to left on mouseover.
3. Make text wrap within button.

Solution 2:

Add a class in css, something like this:

.btn-fixed-width {
    width:60px;
    overflow:hidden;
}

of course, replace width with the specific width you want to use, Add that class to the buttons you want to be fixed width and there you have it!

Solution 3:

First get the text length by

varget = $("#value").val().length;

Then get the max size means width of button before this set a fixed width to button

maxScale = $("#value").width();

then just reduce the font size by

by comparing the both with if set the fontsize

if ( currentFontSize < maxSize ) {
                            currentFontSize += .1;

 $("button").css('font-size', fontSize + 'px');

try this ...