react-awesome-query-builder icon indicating copy to clipboard operation
react-awesome-query-builder copied to clipboard

Help setting up Bootstrap theme

Open nardove opened this issue 2 years ago • 1 comments

After installing the dependencies for reactstrap and bootstrap I tried to setup the theme using the BootstrapConfig option, but when I do so the first element to select from the dropdown does not work properly, see below

Screenshot 2022-06-09 at 16 07 03

And the component does not open to select from the list, when I inspect the DOM it has no elements to select from

Screenshot 2022-06-09 at 16 28 03

But when I use the BasicConfig, it works fine, see below

Screenshot 2022-06-09 at 16 08 35

I wonder if there is an extra step to setup Bootstrap that is not in the demos or docs?

UPDATE I've also noticed that the selection input does work, but if the query component is inside a Modal, the dropdow component renders behind the modal background

nardove avatar Jun 09 '22 15:06 nardove

I think the problem relies on the component being inside a Modal component, as I can see the dropdown underneath the Modal body

nardove avatar Jun 10 '22 17:06 nardove

I had the same issue and can confirm @nardove is correct - you have to go manually give it a higher z index

Cyrelc avatar Jan 13 '23 21:01 Cyrelc