Skip to content

Commit c038672

Browse files
authored
Add instructions for using QB inside Fluent UI Panel (#611)
When placing the query builder inside a Fluent UI <Panel/> component, field selectors don't show any options when clicked (except with BasicConfig). I managed to fix this by adding a CSS statement similar to the one mentioned for Material UI's <Dialog /> but tailored for FluentUI's specific class.
1 parent 0f1bcc0 commit c038672

File tree

1 file changed

+2
-0
lines changed

1 file changed

+2
-0
lines changed

README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -358,6 +358,8 @@ Props:
358358
- If you put query builder component inside [Material-UI](https://github.com/mui-org/material-ui)'s `<Dialog />` or `<Popover />`, please:
359359
- use prop `disableEnforceFocus={true}` for dialog or popver
360360
- set css `.MuiPopover-root, .MuiDialog-root { z-index: 900 !important; }` (or 1000 for AntDesign v3)
361+
- If you put query builder component inside [Fluent-UI](https://developer.microsoft.com/en-us/fluentui)'s `<Panel />`, please:
362+
- set css `.ms-Layer.ms-Layer--fixed.root-119 { z-index: 900 !important; }`
361363
- `props` arg in `renderBuilder` have `actions` and `dispatch` you can use to run actions programmatically (for list of actions see `Actions` in [`index.d.ts`](/modules/index.d.ts)).
362364

363365
### `<Builder />`

0 commit comments

Comments
 (0)