Bootstrap button drop-down inside responsive table not visible because of scroll

Question

I have a problem with drop-down buttons inside tables when are responsive and scroll active because the drop-down is not visible because of overflow  auto  property  How can I fix that in order to show drop-down option of button when this is collapsed  I can use some jQuery but after I have problems with scroll left-right so I decided to find another solution  I have attached a photo to understand better   Here is a small js fiddle

User · Answer

This has been fixed in Bootstrap v4 1 and above by adding data-boundary  viewport   Bootstrap Dropdowns Docs   But for earlier versions  v4 0 and below   I found this javascript snippet that works perfectly  It works for small tables and scrolling tables       table-responsive   on  shown bs dropdown   function  e        var t     this           m     e target  find   dropdown-menu            tb   t offset   top   t height            mb   m offset   top   m outerHeight true           d   20     Space for shadow   scrollbar      if  t 0  scrollWidth  gt  t innerWidth              if  mb   d  gt  tb                t css  padding-bottom     mb   d  - tb                        else           t css  overflow    visible             on  hidden bs dropdown   function            this  css   padding-bottom        overflow

User · Answer

Inside bootstrap css search the next code    fixed-table-body     overflow-x  auto    overflow-y  auto    height  100          and update with this    fixed-table-body     overflow-x  visible    overflow-y  visible    height  100

User · Answer

Try it once  after 1 hour of research on net I found Best Solution for this Problem  Solution - just add script  function             hold onto the drop down menu                                                  var dropdownMenu          and when you show it  move it to the body                                            window  on  show bs dropdown   function  e            grab the menu             dropdownMenu     e target  find   dropdown-menu            detach it and append it to the body        body   append dropdownMenu detach             grab the new offset position     var eOffset     e target  offset            make sure to place it where it would normally go  this could be improved      dropdownMenu css            display    block                top   eOffset top     e target  outerHeight                 left   eOffset left                            and when you hide it  reattach the drop down  and hide it normally                                                          window  on  hide bs dropdown   function  e              e target  append dropdownMenu detach             dropdownMenu hide                   OUTPUT -

User · Answer

We solved this issue here at work by applying a  dropup class to the dropdown when the dropdown is close to the bottom of a table enter image description here

User · Answer

For reference  it s 2018 and I m using BS4 1  Try adding data-boundary  viewport  to the button that toggles the dropdown  the one with the class dropdown-toggle   See https   getbootstrap com docs 4 1 components dropdowns  options

User · Answer

I d took a different approach  I had detached the element from the parent and set it with position absolute by jQuery  Working JS fidle  http   jsfiddle net s270Lyrd       The JS solution I am using         fix menu overflow under the responsive table     hide menu on click     This is a must because when we open a menu     document  click function  event          hide all our dropdowns         dropdown-menu data-parent    hide           document  on  click     table-responsive  data-toggle  dropdown     function             if the button is inside a modal     if     body   hasClass  modal-open              throw new Error  This solution is not working inside a responsive table inside a modal  you need to find out a way to calculate the modal Z-index and add it to the element           return true              buttonGroup     this  parent        if    buttonGroup attr  data-attachedUl              var ts    new Date           ul     this  siblings  ul             ul attr  data-parent   ts            buttonGroup attr  data-attachedUl   ts             window  resize function                   ul css  display    none   data  top                      else            ul       data-parent      buttonGroup attr  data-attachedUl                     if    buttonGroup hasClass  open               ul css  display    none            return            dropDownFixPosition   this  parent     ul       function dropDownFixPosition button  dropdown            var dropDownTop   button offset   top   button outerHeight            dropdown css  top   dropDownTop    px            dropdown css  left   button offset   left    px            dropdown css  position    absolute             dropdown css  width   dropdown width             dropdown css  heigt   dropdown height             dropdown css  display    block            dropdown appendTo  body

User · Answer

This solution worked great for me     media  max-width  767px         table-responsive  dropdown-menu           position  static  important           media  min-width  768px         table-responsive           overflow  visible            More detail  https   github com twbs bootstrap issues 15374

User · Answer

I have a solution using only CSS  just use position relative for dropdowns inside the table-responsive    media  max-width  767px       table-responsive  dropdown-menu       position  relative     Sometimes needs  important            https   codepen io leocaseiro full rKxmpz

User · Answer

Cleaned up  Wazime solution a little  Works great as a general solution     document  on  shown bs dropdown     table-responsive   function  e           The  dropdown container     var  container     e target           Find the actual  dropdown-menu     var  dropdown    container find   dropdown-menu        if   dropdown length               Save a reference to it  so we can find it after we ve attached it to the body          container data  dropdown-menu    dropdown         else            dropdown    container data  dropdown-menu                dropdown css  top     container offset   top    container outerHeight       px         dropdown css  left    container offset   left    px         dropdown css  position    absolute         dropdown css  display    block         dropdown appendTo  body           document  on  hide bs dropdown     table-responsive   function  e           Hide the dropdown menu bound to this button       e target  data  dropdown-menu   css  display    none

User · Answer

my 2   quick global fix      drop down in responsive table   function            table-responsive   on  shown bs dropdown   function  e        var  table     this            menu     e target  find   dropdown-menu            tableOffsetHeight    table offset   top    table height            menuOffsetHeight    menu offset   top    menu outerHeight true        if  menuOffsetHeight  gt  tableOffsetHeight         table css  padding-bottom   menuOffsetHeight - tableOffsetHeight                table-responsive   on  hide bs dropdown   function            this  css  padding-bottom   0                Explications  When a dropdown-menu inside a   table-responsive  is shown  it calculate the height of the table and expand it  with padding  to match the height required to display the menu   The menu can be any size   In my case  this is not the table that has the   table-responsive  class  it s a wrapping div    lt div class  table-responsive  style  overflow auto   gt       lt table class  table table-hover table-bordered table-condensed server-sort  gt    So the  table var in the script is actually a div   just to be clear    or not      Note  I wrap it in a function so my IDE can collapse function    but it s not mandatory

User · Answer

This could be useful for someone else  I m using DatatablesJS  I add 500px to the current height of the table  I do this because Datatables allow you to use 10  20  etc pages in your table  So I need to calculate dinamically the table s height    When dropdown is shown  I add extra height  When dropdown is hiden  I reset original table s height     document  ready function             table-responsive  dropdown   on  shown bs dropdown   function                console log     table-responsive-cliente   height     500                table-responsive-cliente   css  height      table-responsive-cliente   height     500                    table-responsive  dropdown   on  hide bs dropdown   function                     table-responsive-cliente   css  height   auto                And the HTML   lt div class  table-responsive  id  table-responsive-cliente  gt       lt table class  table-striped table-hover  gt                            lt  table gt   lt  div gt    Before    After dropdown is shown

User · Answer

A CSS only solution is to allow the y-axis to overflow   http   www bootply com YvePJTDzI0   table-responsive     overflow-y  visible  important      EDIT  Another CSS only solution is to responsively apply the overflow based on viewport width     media  max-width  767px         table-responsive  dropdown-menu           position  static  important           media  min-width  768px         table-responsive           overflow  inherit            https   www codeply com go D3XBvspns4

User · Answer

The recommended and chosen solution  is not always the best solution  Unfortunately its the solution linkedin recently used and it creates multiple scrollbars on the page based on the situation    My method was slightly different    I contained the table-responsive div in another div  Then I applied height 100   width 100   display block and position absolute so the height and width is based on the page size  and set overflow to hidden    Then on the table responsive div I added a min-height of 100    lt div class  table container       style  height  100   width  100   display  block position  absolute overflow  hidden   gt   lt div class  table-responsive  style  min-height 100    gt    As you can see in the working example below  no added scroll bars  no funny behavior  and practically as its using percentages - it should work regardless of screen size  I have not testing this for that however  If that fails for some reason  one can replace 100  with 100vh and 100vw respectively    x000D   x000D   lt  -- Latest compiled and minified CSS -- gt  x000D   lt link rel  stylesheet  href    maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  gt  x000D   x000D   lt  -- Optional theme -- gt  x000D   lt link rel  stylesheet  href    maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap-theme min css  gt  x000D   x000D               lt script src  https   code jquery com jquery-1 12 4 min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D   lt div class  table container  style  height  100   width  100   display  block position  absolute overflow  hidden   gt  x000D   lt div class  table-responsive  style  min-height 100    gt  x000D                   lt table class  table  gt  x000D                       lt thead gt  x000D                           lt tr gt  x000D                               lt th gt Value1 lt  th gt  x000D                               lt th gt Value2 lt  th gt  x000D                               lt th gt Value3 lt  th gt  x000D                               lt th gt Value4 lt  th gt  x000D                           lt  tr gt  x000D                       lt  thead gt  x000D                       lt tbody gt  x000D                           lt tr gt  x000D                               lt td gt  x000D                                  DATA x000D                                   lt div class  btn-group btn-group-rounded  gt  x000D                                       lt button type  button  class  btn btn-default btn-xs  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  style  border-radius 3px   gt  x000D                                           lt span class  caret  gt  lt  span gt  x000D                                       lt  button gt  x000D                                       lt ul class  dropdown-menu  gt  x000D                                           lt li gt  lt a href     gt One lt  a gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Two lt  a gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Three lt  a gt  lt  li gt  x000D                                           lt li role  seperator  class  divider  gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Four lt  a gt  lt  li gt  x000D                                       lt  ul gt  x000D                                   lt  div gt  x000D                               lt  td gt  x000D   x000D                               lt td gt  x000D                                  DATA x000D                                   lt div class  btn-group btn-group-rounded  gt  x000D                                       lt button type  button  class  btn btn-default btn-xs  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  style  border-radius 3px   gt  x000D                                           lt span class  caret  gt  lt  span gt  x000D                                       lt  button gt  x000D                                       lt ul class  dropdown-menu  gt  x000D                                           lt li gt  lt a href     gt One lt  a gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Two lt  a gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Three lt  a gt  lt  li gt  x000D                                           lt li role  seperator  class  divider  gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Four lt  a gt  lt  li gt  x000D                                       lt  ul gt  x000D                                   lt  div gt  x000D                               lt  td gt  x000D                               lt td gt  x000D                                  DATA x000D                                   lt div class  btn-group btn-group-rounded  gt  x000D                                       lt button type  button  class  btn btn-default btn-xs  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  style  border-radius 3px   gt  x000D                                           lt span class  caret  gt  lt  span gt  x000D                                       lt  button gt  x000D                                       lt ul class  dropdown-menu  gt  x000D                                           lt li gt  lt a href     gt One lt  a gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Two lt  a gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Three lt  a gt  lt  li gt  x000D                                           lt li role  seperator  class  divider  gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Four lt  a gt  lt  li gt  x000D                                       lt  ul gt  x000D                                   lt  div gt  x000D                               lt  td gt  x000D                               lt td gt DATA lt  td gt  x000D                           lt  tr gt  x000D                           lt tr gt  x000D                               lt td gt  x000D                                  DATA x000D                                   lt div class  btn-group btn-group-rounded  gt  x000D                                       lt button type  button  class  btn btn-default btn-xs  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  style  border-radius 3px   gt  x000D                                           lt span class  caret  gt  lt  span gt  x000D                                       lt  button gt  x000D                                       lt ul class  dropdown-menu  gt  x000D                                           lt li gt  lt a href     gt One lt  a gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Two lt  a gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Three lt  a gt  lt  li gt  x000D                                           lt li role  seperator  class  divider  gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Four lt  a gt  lt  li gt                                      lt  ul gt  x000D                                   lt  div gt  x000D                               lt  td gt  x000D   x000D                               lt td gt  x000D                                  DATA x000D                                   lt div class  btn-group btn-group-rounded  gt  x000D                                       lt button type  button  class  btn btn-default btn-xs  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  style  border-radius 3px   gt  x000D                                           lt span class  caret  gt  lt  span gt  x000D                                       lt  button gt  x000D                                       lt ul class  dropdown-menu  gt  x000D                                           lt li gt  lt a href     gt One lt  a gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Two lt  a gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Three lt  a gt  lt  li gt  x000D                                           lt li role  seperator  class  divider  gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Four lt  a gt  lt  li gt  x000D                                       lt  ul gt  x000D                                   lt  div gt  x000D                               lt  td gt  x000D                               lt td gt  x000D                                  DATA x000D                                   lt div class  btn-group btn-group-rounded  gt  x000D                                       lt button type  button  class  btn btn-default btn-xs  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  style  border-radius 3px   gt  x000D                                           lt span class  caret  gt  lt  span gt  x000D                                       lt  button gt  x000D                                       lt ul class  dropdown-menu  gt  x000D                                           lt li gt  lt a href     gt One lt  a gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Two lt  a gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Three lt  a gt  lt  li gt  x000D                                           lt li role  seperator  class  divider  gt  lt  li gt  x000D                                           lt li gt  lt a href     gt Four lt  a gt  lt  li gt  x000D                                       lt  ul gt  x000D                                   lt  div gt  x000D                               lt  td gt  x000D                               lt td gt DATA lt  td gt  x000D                           lt  tr gt  x000D                       lt  tbody gt  x000D                   lt  table gt  x000D               lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Well  reading the top answer  i saw that it really dont works when you are seeing the scroll bar and the toggle button was on last column  in my case  or other column that is unseen    But  if you change  inherit  for  hidden  it will work       table-responsive   on  show bs dropdown   function              table-responsive   css   overflow    hidden        on  hide bs dropdown   function              table-responsive   css   overflow    auto            Try to do that way

User · Answer

Define this properties  Good Luck   data-toggle  dropdown  data-boundary  window

User · Answer

This worked for me in Bootstrap 4 since it has different breakpoints than v3    media  min-width  992px         table-responsive           overflow  inherit

User · Answer

Burebistaruler response works ok for me on ios8  iphone4s  but doen t woks on android that before was working  What i ve donne that Works for me on ios8  iphone4s  and andoir is       table-responsive   on  show bs dropdown   function           table-responsive   css   min-height    400px              table-responsive   on  hide bs dropdown   function               table-responsive   css   min-height    none

User · Answer

Simply Use This   table-responsive       overflow  inherit      It works on Chrome  but not IE10 or Edge because inherit property  is not supported

User · Answer

As long as people still stuck in this issue and we are in 2020 already  I get a pure CSS solution by giving the drop down menu a flex display  this snippet works great with datatable-scroll-wrap class    datatable-scroll-wrap  dropdown dropup open  dropdown-menu       display  flex     datatable-scroll-wrap  dropdown dropup open  dropdown-menu li a       display  flex

User · Answer

I solved myself this and I put the answer in scope to help other user that have same problem  We have an event in bootstrap and we can use that event to set overflow  inherit but this will work if you don t have the css property on your parent container      table-responsive   on  show bs dropdown   function               table-responsive   css   quot overflow quot    quot inherit quot              table-responsive   on  hide bs dropdown   function               table-responsive   css   quot overflow quot    quot auto quot         and this is the fiddle info  In this fiddle example works strange and I m not sure why but in my project works just fine

User · Answer

Based on the accepted answer and the answer of  LeoCaseiro here is what I ended up using in my case     media  max-width  767px         table-responsive          overflow-x  auto          overflow-y  auto           media  min-width  767px         table-responsive          overflow  inherit  important     Sometimes needs  important              on big screens the dropdown won t be hidden behind the reponsive-table and in small screen it will be hidden but it s ok because there is scrolls bar in mobile anyway   Hope this help someone

User · Answer

In my case  this works fine    table-responsive     overflow-y  visible  important

[javascript] Bootstrap button drop-down inside responsive table not visible because of scroll

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to twitter-bootstrap

Examples related to overflow