by In this post we’ll see that, how we can solve the bootstrap dropdown issue when we use the dropdown inside the table or any element with overflow:hidden property. so when you add a bootstrap dropdown button inside a table row and apply the overflow hidden on table container it will hide your dropdown in open state.
For example:
This is sample HTML of your issue:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<div class="lorem-table-wrapper"> <div class="table-body"> <table class="table table-striped"> <thead> <tr> <th></th> <th class="sortable">Column 1</th> <th class="sortable">Column 2</th> <th class="sortable">Column 3</th> <th>Column 4</th> <th>Dropdown</th> </tr> </thead> <tbody> <tr> <td class="new-column"><i class="icon-star-o new-machine" title="New Machine"></i></td><td>Lorem lipsum</td><td>012345</td><td>10/14/12</td><td>10/14/16</td><td> <div class="btn-group"> <button class="btn dropdown-toggle btn-view" data-toggle="dropdown"> <span class="visible-desktop toggle-text">Select</span> <i class="icon-sort"></i> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Lorem lipsum service</a></li> <li><a href="#">Lorem lipsum Content</a></li> <li><a href="#">Lorem lipsum</a></li> <li><a href="#">Custom</a></li> <li><a href="#">Open Requests</a></li> </ul> </div> </td> </tr> <tr> <td class="new-column"></td><td>Lorem Lipsum</td><td>012345</td><td>10/14/12</td><td>10/14/16</td><td> <div class="btn-group"> <button class="btn dropdown-toggle btn-view" data-toggle="dropdown"> <span class="visible-desktop toggle-text">Select</span> <i class="icon-sort"></i> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Lorem lipsum service</a></li> <li><a href="#">Lorem lipsum Content</a></li> <li><a href="#">Lorem lipsum</a></li> <li><a href="#">Custom</a></li> <li><a href="#">Open Requests</a></li> </ul> </div> </td> </tr> </tbody> </table> </div> </div> |
and this your css for table wrapper
|
1 2 3 4 5 6 7 |
.lorem-table-wrapper .table-body { overflow: visible; overflow-x: auto; overflow-y: hidden; -webkit-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } |
This is your output of your HTML and CSS. you can see dropdown is hidden inside table.
To solve this problem we need to two things:
- First capture the event of bootstrap dropdown button when dropdown show and hide
- show.bs.dropdown
- hide.bs.dropdown
- Second inside this event we will check the current target offset(.offset()) and outer height of the current target(.outerHeight());
Here is the full code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var dropdownMenu; $('.table-body').on('show.bs.dropdown', function (e) { dropdownMenu = $(e.target).find('.dropdown-menu'); $('body').append(dropdownMenu.detach()); var eOffset = $(e.target).offset(); dropdownMenu.css({ 'display': 'block', 'top': eOffset.top + $(e.target).outerHeight(), 'left': eOffset.left, 'width':'184px', 'font-size':'14px' }); dropdownMenu.addClass("mobPosDropdown"); }); $('.table-body').on('hide.bs.dropdown', function (e) { $(e.target).append(dropdownMenu.detach()); dropdownMenu.hide(); }); |
Now run your HTML in browser and see your issue is solved
Thanks for reading. Happy Learning!!!
