Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Splitter does not admit pixels as size #3070

Open
1 of 3 tasks
EmyDallonses opened this issue Nov 20, 2024 · 0 comments
Open
1 of 3 tasks

Splitter does not admit pixels as size #3070

EmyDallonses opened this issue Nov 20, 2024 · 0 comments
Labels

Comments

@EmyDallonses
Copy link

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, 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.

Link to Reproduction (or Detailed Explanation)

https://codesandbox.io/p/devbox/zen-tess-jv2sdg?file=%2Fsrc%2FApp.tsx%3A19%2C20

Steps to Reproduce

  1. Create a Splitter component with two panels.
  2. Listen to window resize and save window width value in react state width.
  3. Set the default sizes like this:
    const splitter = useSplitter({ defaultSize: [ { id: "sidebar", size: 20, minSize: (40 / width) * 100, maxSize: 25, }, { id: "page", }, ],
  4. Collapse the sidebar to it's minimum size.
  5. Resize the window.

Ark UI Version

4.2.0

Framework

  • React
  • Solid
  • Vue

Browser

Google Chrome

Additional Information

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants