X Overflow when Chakra UI Sider is collapsed with parent resources
Hello,
When collapsing the default Chakra UI sider with parent resources the sider overflows and looks off. Does anyone know a quick fix to this without doing a custom sider? Ideally, I'd would like to pass the parent resources and let Chakra / Refine figure out the design.
Thanks!
![No description](https://cdn.answeroverflow.com/1182029124987011232/Screenshot_2023-12-06_133655.png)
3 Replies
Hi @beepbopbeepboop. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hmm, I don't know enough to give you a confident answer yet. The information extracts provided do not contain a direct solution to the overflow issue you're experiencing with the Chakra UI Sider when it's collapsed with parent resources.
However, Refine provides a hook called
useThemedLayoutContext
that allows you to control the visibility and behavior of the layout components, including the Sider. You might be able to use this hook to manage the overflow issue, but without more specific information or examples, it's hard to provide a definitive solution.
I recommend checking out the Refine documentation (https://refine.dev/docs) for more information on how to use this hook and other features of Refine. If the issue persists, consider raising an issue on the Refine GitHub page (https://github.com/refinedev/refine/issues) or asking for help in the Refine Discord community (https://discord.com/channels/837692625737613362/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@266652998246072323> kapa.ai is still learning and improving, please let us know how it did by reacting below
fair-rose•10mo ago
Sider uses Chakra UI's drawer. unfortunately we can't give it CSS and customize it at the moment.
I will add this issue to our backlog and we will fix it as soon as possible.
In the meantime you can swizzle and write your own CSS fix.
https://refine.dev/docs/ui-integrations/chakra-ui/components/themed-layout/#customizing-with-swizzle