Bootstrap Dropdown inside 1 row table - popup hidden
See original GitHub issueDescription
Good day For those that stuggle using bootstrap Dropdown with bootstrap-table when you have 1 or 2 rows and the dropdown hides behind the table. This javascript can help solve that for you as a quick fix
$('.dropdown').unbind('show.bs.dropdown');
$('.dropdown').unbind('hide.bs.dropdown');
$('.dropdown').bind('show.bs.dropdown',function(){
$('.fixed-table-body').css( "overflow", "inherit" );
});
$('.dropdown').bind('hide.bs.dropdown',function(){
$('.fixed-table-body').css( "overflow", "auto" );
});
this is done in jQuery, but the logic around it should be simple for alternative ways. Hope it helps somebody
Note I have the unbinds as my contents of the table is html and dynamic, thus I link the contents events each time after loading the data , thus the unbind just to keep it clean.
Hope it helps somebody
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:7
Top Results From Across the Web
Bootstrap button drop-down inside responsive table not visible ...
info: In this fiddle example works strange and I'm not sure why but in my project ... //fix menu overflow under the responsive...
Read more >Dropdowns - Bootstrap
Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .show class on the parent list item....
Read more >Bootstrap Dropdown is hidden behind rows - EJ 2 Forums
Hi, I have been using Syncfusion JS Grid component, and it has been working great so far.. i have added column template to...
Read more >Bootstrap dropdown hidden issue in table - LIFERAY UI
Here is the solution of bootstrap dropdown issue when we applied "overflow:hidden" property on the container element.
Read more >How To Create a Mega Menu - W3Schools
Create a dropdown menu that appears when the user moves the mouse over an element inside a navigation bar. Step 1) Add HTML:...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Okay i agree that point! @thiagozils you can fix it by adding the
position-static
class to thedropdown
div. Example: https://live.bootstrap-table.com/code/UtechtDustin/12322It worked for me @UtechtDustin, thanks