Use jQueryUI .resizable to reverse-resize two or more elements

Question

I want to have 2 or more elements that span equal amounts of the window be resizable. When one element is resized, the next adjacent element must adjust its width to take up the available space in the window. Basically, there should never be any free space, all divs must sum up to be 100% of window width.

I have followed the answer here: jQuery UI Resizable alsoResize reverse

I have an updated JSfiddle here that uses current versions of jQueryUI. It works until you set the position:absolute and left positions of one of the divs (try uncommenting the two commented out lines in CSS): http://jsfiddle.net/WpgzZ/678/

Any idea how to get the divs to resize correctly when the above CSS properties are set?

Well if left is set to `220px` and you decrease the left-most div to less than that then there will be some space between them — Explosion Pills, Apr 30 '13 at 05:21
Well, even with `position:relative` you can set `div.myframe` `left:5px` and it works. It's when you set `position:absolute` that it behaves incorrectly. http://jsfiddle.net/WpgzZ/679/ — professormeowingtons, Apr 30 '13 at 05:23
`position: absolute` elements don't flow together... why do you need it to be `position: absolute`? — Explosion Pills, Apr 30 '13 at 05:24
I use `position:absolute` with `top:0 bottom:0 left:0` to create a 100% height `
`. — professormeowingtons, Apr 30 '13 at 05:32
Solution is available here: http://stackoverflow.com/questions/3369045/jquery-ui-resizable-alsoresize-reverse — professormeowingtons, May 08 '13 at 02:00

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

I found a solution here that involves adding an alsoResizeReverse method to the jQueryUI plugin itself: jQuery UI Resizable alsoResize reverse

edited May 23 '17 at 12:28

Community

1
1

answered Jun 13 '13 at 18:51

professormeowingtons

3,504
7
36
50

Use jQueryUI .resizable to reverse-resize two or more elements

1 Answers1