javascript - JQuery UI resizable if <div> resized -> all siblings move too -


hi use jquery ui resizable , jquery ui draggable of 3 div elements.

the basic dom tree looks this:

enter image description here

so blue , red siblings , orange parent.

if resize blue vertically red automatically changes position vertical space between them stays same. problem not apply draggable, can change vertical distance dragging blue , red around every time resize blue vertically red moves too.

if make blue bigger vertically -> red moves down, not want optimatically can make blue bigger vertically until hits border of red , thats it. enter image description here

i tried several .css styles nothing works

here current .css use:

enter image description here

hi comments, find solution:

jquery ui resizable adds .css attribute position:relative; every resizable <div> element. explain myself this:

"relative: element positioned relative normal position, 'bottom:20px' adds 20 pixels element's bottom position"

this means normal position of red directely under blue, because of draggable added, lets 20px of space dragging red down.

if resize blue, 20px of space preserved, moving red down.

when use position: absolute !important; red positioned "relative first positioned (not static) ancestor element" orange

/*overrides '.ui-resizable' 'position:relative;' helps after resizing position of element placed relative parent <div>*/ position: absolute !important; 

Comments

Popular posts from this blog

jOOQ update returning clause with Oracle -

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

java - BasicPathUsageException: Cannot join to attribute of basic type -