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;
}
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
Javascript Sum and Group by of Json Data
Slick Carousel - Force Slides to Have the Same Height
Calculate Percentage JavaScript
Calculate and Display % Discount for Price Classes JavaScript
How to Read Data from *.Csv File Using JavaScript
Reverse Strings Without Changing the Order of Words in a Sentence
How to Make an Area Unclickable With CSS
Why Is the Onclick Event Triggered Twice
How to Import Modules from All Files in a Directory, Using a Wildcard
Jquery Get Closest Td Text Value
Reprompt for Permissions With Getusermedia() After Initial Denial
How to Add Pm or Am Based on Hour from Input
How to Only Remove the "Watch Later" and "Share" Buttons from Youtube Iframe Embed Player
Show Only a Limited Number of Rows in a Table
Sort Json Data Based on Date and Time