Search code examples
htmlcsstwitter-bootstraptwitter-bootstrap-2

Bootstrap 2.3.2 split button dropdowns in tables line

The dropdown on the right is in a table cell, this works as intended on desktop browser.

enter image description here

However on mobile, on click, the dropdown gets split into two lines:

enter image description here

HTML

<table class="table table-striped table-bordered table-hover">
<tr>
<td> ... </td>
<td> ... </td>
<td> ... </td>
<td>
    <div class="btn-group">
        <a href="#" class="btn btn-primary btn-small"><i class="icon-eye-open icon-white"></i> Visualizza</a>
        <button class="btn dropdown-toggle btn-primary btn-small" data-toggle="dropdown"><span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#"><i class="icon-pencil"></i> Modifica</a></li>
            <li><a class="btn-confirm" href="#"><i class="icon-trash"></i> Elimina</a></li>
        </ul>
    </div>
</td>
</tr>
</table>
Solution

  • The problem most likely stems from the table cell width being laid out too short for both elements.

    The simplest solution would be to set add a class to that cell and add min-width, though you would be moving away from pure bootstrap.

    HTML:

    <td> ... </td>
<td class="dropdownCell">
    <div class="btn-group">
    ...

    Css:

    .dropdownCell { min-width:130px; }

    Fiddle is here: http://jsfiddle.net/a4kx75t1/1/