ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: pbassey on May 29, 2025, 01:18:42 am

Title: BootStrap Dropdown not working
Post by: pbassey on May 29, 2025, 01:18:42 am
I am using a PG Grid that has an "Actions" column that has 3 buttons inside. The 3rd button is named "More" and is supposed to popup a bootstrap menu of 2 items (Export and Delete options), but is not working

Below is a link to jsfiddler that has the code I am using:
https://jsfiddle.net/7swe1L5d/

Notice that when you click on the "more" button inside the grid, nothing happens.  However, when you click on the "more" button above/outside of the grid, it works fine.  Because the menu works outside the grid, there must be an issue with the QueryParam options I am using.

Can you please tell me what I need to do to get this bootstrap popup working inside QueryParam?
Title: Re: BootStrap Dropdown not working
Post by: paramvir on May 29, 2025, 06:50:13 pm
grid cells have overflow: hidden; that's why the dropdown gets clipped.

It can be resolved by:

a) Either add style overflow: visible to the cells containing bootstrap dropdowns.

b) or add data-bs-popper-config='{"strategy":"fixed"}' to data-bs-toggle='dropdown' elements:

jsfiddle with 2nd solution:

https://jsfiddle.net/zyhcok5p/

More discussion about this issue:

https://stackoverflow.com/questions/31829312/bootstrap-dropdown-clipped-by-overflowhidden-container-how-to-change-the-conta
Title: Re: BootStrap Dropdown not working
Post by: pbassey on May 29, 2025, 07:55:12 pm
Perfect!  Thank you...