Skip to content

Commit 1bcd130

Browse files
authored
Add a demo for using a Select component within a Drawer (requires position="popper") (#1245)
* add example with select used in a drawer component * improve appearance
1 parent e965965 commit 1bcd130

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed

docs/library/forms/select.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,3 +174,27 @@ def select_form_example():
174174
width="50%",
175175
)
176176
```
177+
178+
179+
### Using Select within a Drawer component
180+
181+
If using within a [Drawer](../../overlay/drawer/) component, set the `position` prop to `"popper"` to ensure the select menu is displayed correctly.
182+
183+
```python demo
184+
rx.drawer.root(
185+
rx.drawer.trigger(rx.button("Open Drawer")),
186+
rx.drawer.overlay(z_index="5"),
187+
rx.drawer.portal(
188+
rx.drawer.content(
189+
rx.vstack(
190+
rx.drawer.close(rx.box(rx.button("Close"))),
191+
rx.select(["apple", "grape", "pear"], position="popper"),
192+
),
193+
width="20em",
194+
padding="2em",
195+
background_color=rx.color("gray", 1),
196+
),
197+
),
198+
direction="left",
199+
)
200+
```

0 commit comments

Comments
 (0)