question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bootstrap Dropdown inside 1 row table - popup hidden

See original GitHub issue

Description

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:closed
  • Created a year ago
  • Reactions:1
  • Comments:7

github_iconTop GitHub Comments

1reaction
UtechtDustincommented, Aug 3, 2022

Okay i agree that point! @thiagozils you can fix it by adding the position-static class to the dropdown div. Example: https://live.bootstrap-table.com/code/UtechtDustin/12322

0reactions
thiagozilscommented, Aug 4, 2022

It worked for me @UtechtDustin, thanks

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found