CODEWITHSUNDEEP
cssfirefoxtwitter-bootstrap
notan3xit
notan3xit

Reputation: 2436

Positioning <button class="close"> in Bootstrap dropdown element in Firefox

I am trying to position a Bootstrap close button within a dropdown element (also Bootstrap). 

  <div id="contextmenu" class="dropdown clearfix" style="position: absolute;">
    <ul class="dropdown-menu" style="display: block;">
      <li><a href="#">Text <button type="button" class="close">&times;</button></a></li>
    </ul>
  </div>

That thing floats right, but appears mispositioned in Firefox (first screenshot). Chrome renders it as intended (second screenshot).

Close button within dropdown element in Firefox

Close button within dropdown element in Firefox

Is there any way to make Firefox render it correctly (i.e. as Chrome does)?

Upvotes: 1

Views: 8764

Answers (1)

kunalbhat
kunalbhat

Reputation: 1719

Hard to know without more context regarding your CSS, but one solution might be to check that the position the of the 'x' is positioned absolutely relative to your containing <li>.

CSS

.dropdown-menu li {
  ..
  position: relative;
}

.dropdown-menu li .close {
  position: absolute;
  right: 0;
}

Upvotes: 1

Related Questions