twitter bootstrap input append dropdown button appears on wrong side of input when in a table

Question

The html below works fine by itself but when put inside a table td, the drop down button appears on the left side of the input when it should be on the right side. It should look something like the append with button example in the 'Extending form controls' section of this page: http://twitter.github.com/bootstrap/base-css.html#forms

Both items have the correct shape. ie. the rounded corners and the straight edges are on the correct sides but because the button is on the left side of the input, the straight edges don't line up. Its the rounded corners that are next to one another. I want them to appear as in the markup, with the input side by side with the drop down button, appearing to be joined together. Even if a try using the class "input-prepend' (not that a want it that way) it doesn't change.

Note: I'm using twitter bootstrap in a rails application via the latest version of the twitter-bootstrap-rails gem.

<div class="btn-group input-append">    
    <input class="span2" id="fruit_selection" name="fruit" />           
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Fruit <span class="caret"></span></a> 
    <ul class="dropdown-menu">
        <li><a href="#">apple</a></li>
        <li><a href="#">orange</a></li>
        <li><a href="#">banana</a></li>
    </ul>   
</div>  

• The only css I have is what came with twitter bootstrap and also jquery ui.
• Its the same in safari and firefox.
• Its within form tags.
• I've tried as many combinations of divs, spans, classes(append, prepend, btw-group, add-on, control-group etc) that I can think of.

Am I doing it wrong ? Is there any extra css I can add to make it work? Any help would be appreciated.

For bonus points: The append and prepend example( http://twitter.github.com/bootstrap/base-css.html#forms ) doesn't work on my site either in or out of a table. I can only use one or the other not both at the same time.

Answer 1

I see what you're trying to do now, you want to use an input instead of a button with the dropdown group. Looking over the documentation of the bootstrap i found no solution for that setup though you can easily emulate your own by copying the button behavior and just creating your own class to support an input with a dropdown group, like so:

CSS

.btn-group .input:first-child {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    margin-left: 0;
}

.btn-group .input {
    float: left;
    position: relative;
}

With this CSS in place all you have to do is include the .input class in your input field and it should work:

HTML

<div class="btn-group">    
    <input class="span2 input" id="fruit_select" name="fruit" />            
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Fruit <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a href="#">apple</a></li>
        <li><a href="#">orange</a></li>
        <li><a href="#">banana</a></li>
    </ul>
</div>

Demo, edit here.