Weird bootstrap dropdown behavior in Firefox

Question

I'm doing a web application developing on Chrome and had no problem. I decided to test the site rapidly in Firefox to see if there were any difference and came up with a weird behavior on a dropdown when on a table.

I've made a fiddle to test the behavior alone. You can see the dropdown appearing at the bottom of the page instead of right close to the td. If you try it in Chrome it works perfectly but fails in Firefox.

After investigation, I've found that after disabling these two attributes in the css of the .dropdown-menu, the dropdown work as expected.

top: 100%
left: 0;

The dropdown works when on a div, but not when on a td.

Is there something wrong in the html of the table that makes the dropdown fail to appear at the right place, or is it just a css failure that has to be patched for my precise need?

Answer 1

Firefox doesn't support position: relative; on table cells. To get around this, you'll need to wrap the dropdown in a div.

Here's a working example on jsFiddle.

<table class="table table-bordered">
  <tr>
    <td class="rl2">
      <div class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
        <ul class="dropdown-menu" aria-labelledby="dLabel" role="menu">
          <li><a href="#" class="rl1">rl1</a></li>
          <li><a href="#" class="rl2">rl2</a></li>
        </ul>
      </div>
    </td>
    <td>...</td>
    <td>...</td>
  </tr>
</table>