Bootstrap Button Drop-Down Inside Responsive Table Not Visible Because of Scroll

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

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( "overflow", "inherit" );
});

$('.table-responsive').on('hide.bs.dropdown', function () {
$('.table-responsive').css( "overflow", "auto" );
})

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.

Make dropdown visible in bootstrap responsive table

Found a solution in a GitHub issues discussion on this issue here.

Credit to @baltazarqc, @llins and @simon21587.

This is still not really what I was hoping for, but it does at least make the dropdown functional.

Added the pull-right class to my ul.drop-down element. Then used their jQuery solution.

$(function() {
$('.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 > t.innerWidth()) {
if (mb + d > tb) {
t.css('padding-bottom', ((mb + d) - tb));
}
} else {
t.css('overflow', 'visible');
}
}).on('hidden.bs.dropdown', function() {
$(this).css({
'padding-bottom': '',
'overflow': ''
});
});
});

Working fiddle here.

Bootstrap 4 dropdown not-visible inside datatable

You have an overflow on your data table. So to make your dropdown visible, you need to append it to the body. Solution

Bootstrap 4 drop-down menu in table

As stated in the Bootstrap docs...

Vertical clipping/truncation

Responsive tables make use of overflow-y:
hidden, which clips off any content that goes beyond the bottom or top
edges of the table. In particular, this can clip off dropdown menus
and other third-party widgets.

It's happening because the table-responsive doesn't have enough vertical height. Give the table-responsive a min height, for example...

.vh-100 {
min-height: 100vh;
}

https://codepen.io/anon/pen/VXmLqG?editors=1100

Bootstrap action dropdown is not working inside table-responsive

Here you go with a solution https://jsfiddle.net/n2omqzpu/1/

$('a[class="dropdown-toggle"]').click(function(){ var pos = $(this).closest('td').position();  var ele = $(this).siblings('ul.dropdown-menu');  var width = $(document).width() - 200;
if( width > pos.left) { $(ele).css({ left: pos.left, top: (pos.top + 20) }); } else { $(ele).css({ left: (pos.left - 180), top: (pos.top + 20) }); }});
.dropdown-toggle{ cursor:pointer;}
.dropdown-menu{ position:fixed;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><div class="container"><div class="table-responsive"><table class="table table-bordered"><thead><tr><th>Firstname</th><th>Email</th><th>Lastname</th><th>Password</th><th>Phone</th><th>Created By</th><th>Registration Date</th><th>Action</th>

</tr></thead><tbody>
<tr><td>John</td><td>Doe</td><td>john@example.com</td><td>Password</td><td>Phone</td><td>Created By</td><td>Registration Date</td><td><div class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-pencil fa-lg"></i><span class="caret"></span></a><ul class="dropdown-menu menuScroll"><li><a href="">Details</a></li><li><a href="">Document</a></li><li><a href="">Care Plan</a></li><li><a href="">Health Ins Info</a></li><li><a href="">Workers Comp Info</a></li><li><a href="">Personal Injury Info</a></li><li><a href="">Work Related Injuries</a></li><li><a href="">Motor Vehicle Accident</a></li><li><a href="">Medical History</a></li><li><a href="">Past Appointment</a></li><li><a href="">Upcoming Appointment</a></li><li><a href="">Authorization</a></li>
<li><a href="">Child Patient</a></li><li><a href="">Billing Record</a></li></ul>   <a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>   
</div></td></tr>
<tr><td>John</td><td>Doe</td><td>john@example.com</td><td>Password</td><td>Phone</td><td>Created By</td><td>Registration Date</td><td><div class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-pencil fa-lg"></i><span class="caret"></span></a><ul class="dropdown-menu menuScroll"><li><a href="">Details</a></li><li><a href="">Document</a></li><li><a href="">Care Plan</a></li><li><a href="">Health Ins Info</a></li><li><a href="">Workers Comp Info</a></li><li><a href="">Personal Injury Info</a></li><li><a href="">Work Related Injuries</a></li><li><a href="">Motor Vehicle Accident</a></li><li><a href="">Medical History</a></li><li><a href="">Past Appointment</a></li><li><a href="">Upcoming Appointment</a></li><li><a href="">Authorization</a></li>
<li><a href="">Child Patient</a></li><li><a href="">Billing Record</a></li></ul>   <a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>   
</div></td></tr>
<tr><td>John</td><td>Doe</td><td>john@example.com</td><td>Password</td><td>Phone</td><td>Created By</td><td>Registration Date</td><td><div class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-pencil fa-lg"></i><span class="caret"></span></a><ul class="dropdown-menu menuScroll"><li><a href="">Details</a></li><li><a href="">Document</a></li><li><a href="">Care Plan</a></li><li><a href="">Health Ins Info</a></li><li><a href="">Workers Comp Info</a></li><li><a href="">Personal Injury Info</a></li><li><a href="">Work Related Injuries</a></li><li><a href="">Motor Vehicle Accident</a></li><li><a href="">Medical History</a></li><li><a href="">Past Appointment</a></li><li><a href="">Upcoming Appointment</a></li><li><a href="">Authorization</a></li>
<li><a href="">Child Patient</a></li><li><a href="">Billing Record</a></li></ul>   <a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>   
</div></td></tr>
<tr><td>John</td><td>Doe</td><td>john@example.com</td><td>Password</td><td>Phone</td><td>Created By</td><td>Registration Date</td><td><div class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-pencil fa-lg"></i><span class="caret"></span></a><ul class="dropdown-menu menuScroll"><li><a href="">Details</a></li><li><a href="">Document</a></li><li><a href="">Care Plan</a></li><li><a href="">Health Ins Info</a></li><li><a href="">Workers Comp Info</a></li><li><a href="">Personal Injury Info</a></li><li><a href="">Work Related Injuries</a></li><li><a href="">Motor Vehicle Accident</a></li><li><a href="">Medical History</a></li><li><a href="">Past Appointment</a></li><li><a href="">Upcoming Appointment</a></li><li><a href="">Authorization</a></li>
<li><a href="">Child Patient</a></li><li><a href="">Billing Record</a></li></ul>   <a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>   
</div></td></tr>
<tr><td>John</td><td>Doe</td><td>john@example.com</td><td>Password</td><td>Phone</td><td>Created By</td><td>Registration Date</td><td><div class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-pencil fa-lg"></i><span class="caret"></span></a><ul class="dropdown-menu menuScroll"><li><a href="">Details</a></li><li><a href="">Document</a></li><li><a href="">Care Plan</a></li><li><a href="">Health Ins Info</a></li><li><a href="">Workers Comp Info</a></li><li><a href="">Personal Injury Info</a></li><li><a href="">Work Related Injuries</a></li><li><a href="">Motor Vehicle Accident</a></li><li><a href="">Medical History</a></li><li><a href="">Past Appointment</a></li><li><a href="">Upcoming Appointment</a></li><li><a href="">Authorization</a></li>
<li><a href="">Child Patient</a></li><li><a href="">Billing Record</a></li></ul>   <a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>   
</div></td></tr>


</tbody></table></div></div>

drop-down menu hiding behind the panel

Issue is related to overflow of a parent div. See following code for that div and see image for reference:

@media screen and (max-width: 767px)
tables.less:180
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: visible;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
height: 120px;
}

enter image description here

When i click on action drop down the options are displaying in scrollbar why?

Set style="overflow: inherit;" to <div class="table-responsive">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><div class="container"><div class="table-responsive" style="overflow: inherit;">  <table class="table table-bordered">    <thead>      <tr>        <th>Firstname</th>        <th>Lastname</th>        <th>Email</th>        <th>Action</th>      </tr>    </thead>    <tbody>      <tr>        <td>John</td>        <td>Doe</td>        <td>john@example.com</td>        <td>        <div class="dropdown">  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example  <span class="caret"></span></button>  <ul class="dropdown-menu">    <li><a href="#">HTML</a></li>    <li><a href="#">CSS</a></li>    <li><a href="#">JavaScript</a></li>    <li><a href="#">HTML</a></li>    <li><a href="#">CSS</a></li>    <li><a href="#">JavaScript</a></li>  </ul></div>        </td>      </tr>      <tr>        <td>Mary</td>        <td>Moe</td>        <td>mary@example.com</td>          <td>        <div class="dropdown">  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example  <span class="caret"></span></button>  <ul class="dropdown-menu">    <li><a href="#">HTML</a></li>    <li><a href="#">CSS</a></li>    <li><a href="#">JavaScript</a></li>    <li><a href="#">HTML</a></li>    <li><a href="#">CSS</a></li>    <li><a href="#">JavaScript</a></li>  </ul></div>        </td>      </tr>      <tr>        <td>July</td>        <td>Dooley</td>        <td>july@example.com</td>          <td>        <div class="dropdown">  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example  <span class="caret"></span></button>  <ul class="dropdown-menu">    <li><a href="#">HTML</a></li>    <li><a href="#">CSS</a></li>    <li><a href="#">JavaScript</a></li>    <li><a href="#">HTML</a></li>    <li><a href="#">CSS</a></li>    <li><a href="#">JavaScript</a></li>  </ul></div>        </td>      </tr>    </tbody>  </table>  </div></div>


Related Topics



Leave a reply



Submit