General Category > Help for ParamQuery Pro

BootStrap Dropdown not working

(1/1)

pbassey:
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?

paramvir:
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

pbassey:
Perfect!  Thank you...

Navigation

[0] Message Index