How to keep Bootstrap dropdown always on top

Question

We are using Bootstrap 3 Dropdown however, it looks like this when there is a horizontal scroll bar that the container div shows when the page is not big enough in width. Please aware that it is not the scroll bar of the browser window. The scrollbar clips the dropdown like below:

enter image description here

I have checked dropdown-menu which is associated with the ul element that is the dropdown and it looks fine to me:

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 15px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #999999;
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}

Later I checked whether the container div has any z-index defined but I couldn't find any. But it has a class called table-responsive and it looks like this:

@media screen and (max-width: 1600px)
.table-responsive {
margin-bottom: 15px;
overflow-x: auto;
overflow-y: hidden;
width: 100%;
}

What happens if you change overflow-y from hidden to visible? — khilley, Sep 26 '14 at 18:28
@khilley: Didn't change anything unfortunately. I have actually tried several of them but no luck. — Tarik, Sep 26 '14 at 18:30
This is a problem with the table-responsive. They don't support dropdowns inside table-responsive. See last comment in this thread: https://github.com/twbs/bootstrap/issues/11037 — Christina, Sep 26 '14 at 18:38
https://github.com/twbs/bootstrap/issues/11037 -- also see the very, very last comment, after the issue was closed, this provides some jquery to fix it in some situations — Christina, Sep 26 '14 at 18:39
I don't think you can. `.table-responsive` needs that `overflow-y` in order to work, but will obviously hide your dropdown, so unless you find some solution involving jQuery or JS, I don't think it's possible — Devin, Sep 26 '14 at 18:39
@Fabio is correct. This has been addressed and will not be fixed. There is no fix. That is, they won't write js to fix it. — Christina, Sep 26 '14 at 18:40
also, you're a seasoned user, you know you need MUCH MORE code than that to solve your issue. Anyways, here's a Bootply for anyone that wants to take a stab http://www.bootply.com/77Aldw2Mzl — Devin, Sep 26 '14 at 18:41
Already did, in that thread, you toggle the class and add some height to the parent, other than that, clone and position outside. There's a script to be written. — Christina, Sep 26 '14 at 18:46
@Fabio: I thought that could be a known problem within Bootstrap, so this amount of code could give some lead for people but thanks for sharing that link! — Tarik, Sep 26 '14 at 18:47
@Tarik I know you didn't do it in bad faith, hence the "seasoned user" comment and why I added the code, what I meant is that HTML is the main part of the equation, because by seeing your image, there's something that jumps to the view at first glimpse: you really don't need a wide table (hence overflowing), thus it looks to me you're adding a layer of complication that you could easily solve by just using the width you need and nothing else. Or even better: why a table for something that isn't tabular data? — Devin, Sep 26 '14 at 18:51
I had some help with this last year: http://stackoverflow.com/questions/19606828/in-bootstrap-3s-table-responsive-when-below-breakpoint-dropdown-menus-cant-be -- the question has the fix in it first link and the second answer is also useful — Christina, Sep 26 '14 at 18:56
If you add position: absolute to the .btn-group div, this seems to work in the Bootply from @Fabio — khilley, Sep 26 '14 at 19:29

Tarik · Accepted Answer · 2014-09-29T19:41:30.820

I have found the answer. First of all, change btn-group's position css rule from relative to inherit.

$("#dropdownMenu").on("show.bs.dropdown", function () {
    // For difference between offset and position: http://stackoverflow.com/a/3202038/44852
    var dropdownButtonPosition = $(this).position();
    var dropdownButtonOffset = $(this).offset();
    var dropdownButtonHeight = $(this).height();
    var dropdownMenu = $(this).find(".dropdown-menu:first");
    var dropdownMenuHeight = dropdownMenu.height();
    var scrollToTop = $(document).scrollTop();

    // It seems there are some numbers that don't get included so I am using some tolerance for
    // more accurate result.
    var heightTolerance = 17;

    // I figured that window.innerHeight works more accurate on Chrome
    // but it is not available on Internet Explorer. So I am using $(window).height() 
    // method where window.innerHeight is not available.
    var visibleWindowHeight = window.innerHeight || $(window).height();

    var totalHeightDropdownOccupies = dropdownMenuHeight +
        dropdownButtonOffset.top + dropdownButtonHeight + heightTolerance - scrollToTop;

    // If there is enough height for dropdown to fully appear, then show it under the dropdown button,
    // otherwise show it above dropdown button.
    var dropdownMenuTopLocation = totalHeightDropdownOccupies < visibleWindowHeight
        ? dropdownButtonPosition.top + dropdownButtonHeight
        : dropdownButtonPosition.top - dropdownMenuHeight - dropdownButtonHeight + heightTolerance;

    dropdownMenu.css("left", dropdownButtonPosition.left)
        .css("top", dropdownMenuTopLocation);
});

I have the same problem when i use

– Carlos Apr 28 '22 at 21:35 — Carlos, Apr 28 '22 at 21:35

How to keep Bootstrap dropdown always on top

1 Answers1