Don't resize one pane when container size changes

[davidcann]

As far as I can tell, there's no way to create a sidebar that the user can resize, but that stays a fixed size (in pixels) when the window is resized. This is a common sidebar or panel configuration, so I think it should be possible in a library like this.

Is this already possible?

[orefalo]

Hi @davidcann It is, check the last example on this page https://orefalo.github.io/svelte-splitpanes/

	<Pane size={6} minSize={6} maxSize={6}>
		<p>MenuBar</p>
	</Pane>

[davidcann]

That simply locks it at 6% width. What I'm looking for is the left pane (sidebar) to stay a fixed width (in pixels, not percent), but the right pane width to change as the window is resized.

I'd also like for the user to be able to drag to change the sidebar's width and have it remain fixed at that pixel width, like described above.

It seems that everything in the library is based only on percentages, so pixels are not possible. Is that correct? Otherwise, the library looks fantastic, so I wish it could do this too!

[Tal500]

It seems that everything in the library is based only on percentages, so pixels are not possible. Is that correct? Otherwise, the library looks fantastic, so I wish it could do this too!

You got it right, pixels are nightmare for us. Not because we don't know how to transform pixels to prec and vice versa, but because it doesn't capture all cases in a general way(never forget SSR and user custom styling), not to mention legacy supports (when Observer is partially supported). See the full discussion in #33.

I'd also like for the user to be able to drag to change the sidebar's width and have it remain fixed at that pixel width, like described above.

Therefore, the current status, until we'd choose or get a PR that handle all the small side cases, is that we prefer to keep the conversion between PX and % to the user land.

Maybe it should be documented in an example that tells how to do this, but here is my recepie:

1. For SSR, you can add custom CSS styling to the pane that sets min-width: 1px; max-width: 1px;; change the measurements and the dimension to your case.
2. On mount, calc by JS the size of % which equals to the amount of PX
3. Use JS modern Observer for the container dimension, or for non-modern client use a custom trigger when the container size should be changed(e.g. when side menu is being opened/closed) together with listening to window resize event, and when it gets trigger, do the same as in 2.

Wish that there will be an easier way to achieve this all things together. As mentioned, the current status is to let the user to deal with this issue by himself, since he chooses how complicated the code should be for capturing all this side cases. (Some don't care about SSR and non-modern support)

We're open to discussion though for ideas how to handle this problem in a user friendly way.