You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm trying to create a resizable sidebar using Splitter, and I need this sidebar to have a minimum size of 40px, so it will always have the same size when it's collapsed. I tried to resolve it calculating the percentage of the screen width when setting default sizes, like this:
const splitter = useSplitter({ defaultSize: [ { id: "sidebar", size: 20, minSize: (40 / width) * 100, maxSize: 25, } ],
Constant width is the screen width and it changes every time the window resizes, but defaultSize won't update even if width is changing because it only runs once when the component mounts. I need to refresh the page for it to recalculate. I'm wondering if it's possible to also admit pixels as size.
Description
I'm trying to create a resizable sidebar using Splitter, and I need this sidebar to have a minimum size of 40px, so it will always have the same size when it's collapsed. I tried to resolve it calculating the percentage of the screen width when setting default sizes, like this:
const splitter = useSplitter({ defaultSize: [ { id: "sidebar", size: 20, minSize: (40 / width) * 100, maxSize: 25, } ],
Constant
width
is the screen width and it changes every time the window resizes, butdefaultSize
won't update even if width is changing because it only runs once when the component mounts. I need to refresh the page for it to recalculate. I'm wondering if it's possible to also admit pixels as size.Link to Reproduction (or Detailed Explanation)
https://codesandbox.io/p/devbox/zen-tess-jv2sdg?file=%2Fsrc%2FApp.tsx%3A19%2C20
Steps to Reproduce
width
.const splitter = useSplitter({ defaultSize: [ { id: "sidebar", size: 20, minSize: (40 / width) * 100, maxSize: 25, }, { id: "page", }, ],
Ark UI Version
4.2.0
Framework
Browser
Google Chrome
Additional Information
No response
The text was updated successfully, but these errors were encountered: