Geek asks and answers

Dropdown behavior of weird bootstrap in Firefox

I am developing web applications in Chrome and have no problems. I decided to quickly test the site in Firefox to find out if there is any difference, and strange behavior is caused when the drop-down list is displayed when on the table.

I did a fiddle to test the behavior alone. You can see the dropdown at the bottom of the page, and not to the right of td. If you try it in Chrome, it works fine, but it doesn't work in Firefox.

After researching, I found that after disabling these two attributes in css, the .dropdown-menudropdown menu works as expected.

top: 100%
left: 0;

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

Is there something wrong with the html of the table due to which the dropdown menu is not showing in the right place, or is it just a css failure that needs to be fixed for my exact need?

+5
source share
1 answer

Firefox does not support position: relative;on tablecells. To get around this, you need to wrap the drop-down menu in div.

Here is a working jsFiddle example .

<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>
+9
source

More articles:


All Articles