Minimum width for both panels

[mjlai3]

Looking at the Horizontal Splitter Panes example http://codepen.io/rstrahl/pen/eJZQej

Although the right panel has min-width: 200px; set, it seems you can still drag it beyond the minimum width. Is there something I'm missing?

[RickStrahl]

Hmmm... yeah I see that as well - seems to be due to the fact the inside panel isn't fixed sized (ie. appears to flow past the edge of the viewbox. It's more of a layout issue though than an issue of the resizer.

[gregblass]

Definitely a deal breaker for me. I can't figure out how to give the right column a minimum width, or the bottom column a minimum height. And here I thought I was great with CSS...

[kristjan07]

+1 to that problem...Would be great to set min-width to both panels

[gregblass]

@kristjan07 I ended up using http://layout.jquery-dev.com/ for the project that I needed it for, and it worked well. Its not well documented but they added a minHeight and minWidth recently: https://groups.google.com/forum/#!topic/jquery-ui-layout/zohRG5DDvpM

[kristjan07]

@gregblass Thanks for a great link. I'll test this out and if it works for me i have to ditch jquery-resizable. Sadly.

[RickStrahl]

I've looked at this in a number of different ways and I can't figure out a way to make this work without explicitly specifying the min width/height for both panels as part of the plug-in.

The issue is that manual resizing of the primary panel will create the main panel in a new size and that size will be fixed in size. Setting a min-width in the related panel just forces the panel to stay that size and push out beyond the borders of the container (invisibly).

To fix this would require widening the scope of this small resizable component to more of a layout module, which isn't really the goal. That resizing works the way it does is more of a bonus feature.

If anybody has any ideas without being explicit about each of the sizes outside of CSS, I would love to hear it.

[kristjan07]

@RickStrahl For me the min width/height for both of the panel is totaly fine. It would be a bonus because i have content in both panels that i don't want to be "squashed" under somekind of min-width. Lets be honest. If you make panel width less than 100px your content is useless - you cant use it most of cases.

[0rsa]

Set a max-width in left panel to have a min-width in right panel

[lpatch]

@0rsa This solution worked for me as well. I set a max-width of the left panel with the below code, where "200" would be whatever you want the min-width of the right panel to be.

maxWidth = $('.panel-container').width() - 200; $('.panel-left').css('max-width', maxWidth);