Geek Answers Handbook

The enter button down to enter twitter bootstrap appears on the wrong side of the entry when in the table

The html below works fine on its own, but when it is placed inside the td table, a drop-down button appears on the left side of the input, when it should be on the right side. It should look like for example, add an example of a button in the "Extend Forms" section of this page: http://twitter.github.com/bootstrap/base-css.html#forms

Both elements have the correct shape. i.e. rounded corners and straight edges are on the right sides, but since the button is on the left side of the entrance, the straight edges do not line up. Its rounded corners that are next to each other. I want them to appear as in the markup, while the input side by side with the drop-down button seemed to be connected together. Even if you try to use the "input-prepend" class (not the one that wants it this way), it does not change.

Note. I am using twitter bootstrap in a rails application through the latest 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 up with twitter bootstrap as well as jquery ui.
  • The same goes for safari and firefox.
  • Its inside form tags.
  • divs, spans, classes (append, prepend, btw-group, add-on, control-group ..), .

? css, , ? .

: append prepend (http://twitter.github.com/bootstrap/base-css.html#forms) , . .

+5
2

, , . , , , , :

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;
}

CSS , , .input , :

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>

, .

+4

div - . , , , . . .

<div class="control-group">
  <div class="controls">  
    <ul class="dropdown-menu">
        <li><a href="#">apple</a></li>
        <li><a href="#">orange</a></li>
        <li><a href="#">banana</a></li>
    </ul>   
  </div>
</div>
0

More articles:


All Articles