April 12, 2021

Bootstrap dropdown hidden issue in table

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:

and this your css for table wrapper

This is your output of your HTML and CSS. you can see dropdown is hidden inside table.

dropdown-hide

To solve this problem we need to two things:

  1. First capture the event of bootstrap dropdown button when dropdown show and hide
    • show.bs.dropdown
    • hide.bs.dropdown
  2. 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:

Now run your HTML in browser and see your issue is solved

Thanks for reading. Happy Learning!!!

Leave a Reply

Your email address will not be published. Required fields are marked *