Fixing button size in Twitter Bootstrap

Question

I use Twitter Bootstrap in my web app. I have a table with many buttons. Text of button changes with the current state of the row of table. I change button text with Jquery, after Ajax request responses.

My trouble is, these button texts' length is not fixed. Some of them is long some of them is short.

So when one row has long text and another one has short text, it seems bad to user's eye.

Can I fix button size? So all of them has equal size?

Answer 1

Give all the buttons you want to be of equal size a class e.g. class="myButton"

Then in the custom CSS area of your template you can just give that class a width:

.myButton {
    width: 150px;
}

Or, if you want them all to have width of the longest button you can use jQuery, just call this code whenever the values of your .myButton buttons change. This code is explained here: https://stackoverflow.com/a/5784399/1130734

$('.myButton').width(
    Math.max.apply(
        Math,
        $('.myButton').map(function(){
            return $(this).outerWidth();
        }).get()
    )
);

Here is a jsfiddle example http://jsfiddle.net/hQCf9/

Answer 2

Even simpler, use the span* class (span, span2 etc). This will keep the buttons in sync with the grid.

Note that the whitespace for some elements (like paragraph) is different from the whitespace on actual buttons, so that will probably mess up the button size if you mix elements in your table (like I did on purpose in the example below). So it is best to stick to just one kind of element.

Personally, I prefer to avoid tables, but you said you were going to use tables, so I did too. Could be you could solve this with just the grid/scaffolding though, that would probably be prettier, more flexible and more responsive. Your call.

Also remember that you can style pretty much any element to look like a button. If your button just contains a link, then an A tag is probably better; it can still look and function like a button.

Heres an ugly old table with lots of clickables, it does the job of explaining this I hope:

<table class="span8">
    <tr>
        <td>
        You could do buttons
        </td>

        <td>
        <button class="span3 btn btn-info">Like this button</button>
        </td>

        <td>
        <button class="span3 btn btn-info">and this</button>
        </td>
    </tr>

    <tr>        
        <td>
        Or a paragraph
        </td>

            <td>
        <p class="span3 btn btn-info">Like this paragraph</p>
        </td>

        <td>
        <a href="http://www.example.com" class="span3 btn btn-info">Or an anchor</a>
        </td>

    </tr>

        <tr>        
        <td>
        Note the difference in whitespace on Block elements (like Paragraphs and Anchors) and inline elements (like buttons).
        </td>

            <td>
        <p class="span3 btn btn-info">Like this paragraph</p>
        </td>

        <td>
        <a href="http://stackoverflow.com/" class="span3 btn btn-info">Or an anchor with an ridicilous amont of text on it, but this things do happen so plan ahead.</a>
        </td>

    </tr>

    <tr>        
        <td>
        Or a paragraph with a link
        </td>

            <td>
        <a href="http://stackoverflow.com/"><p class="span3 btn btn-info">Paragraph w/link</p></a>
        </td>

        <td>
        <button class="span3 btn btn-info">This a button with fairly long text. Beware of whitespace</button>
        </td>

    </tr>

    <tr>        
        <td>
        Or a paragraph with a link
        </td>
<td>
        <button class="span3 btn btn-info">Another button</button>
        </td>

        <td>
        <a href="http://stackoverflow.com/"><p class="span3 btn btn-info">Another linked paragraph</p></a>
        </td>



    </tr>


</table>

Note that exactly the same classes are called for each of the clickables. I hope this answers your question.