CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
Viktor Carlson
Viktor Carlson

Reputation: 1008

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

Hi I use the jQuery UI Resizable and jQuery UI Draggable for all of my three div elements.

The basic Dom tree looks like this:

enter image description here

So basically blue and red are siblings and orange is the parent.

If I resize blue vertically then red automatically changes its position that the vertical space between them stays the same. This problem does not apply to Draggable, so I can change the vertical distance by dragging blue and red around but every time I resize blue vertically red moves too.

If I make blue bigger vertically -> red moves down, I do not want that optimatically it would be that you can make blue bigger vertically until it hits the border of red and then thats it. enter image description here

I tried several .css styles but nothing works

Here is the current .css that I use:

enter image description here

Upvotes: 1

Views: 1384

Answers (2)

Viktor Carlson
Viktor Carlson

Reputation: 1008

Hi thanks for all your comments, I could find the solution:

JQuery UI resizable adds the .css attribute position:relative; to every resizable <div> element. I explain it to myself like this:

"relative: The element is positioned relative to its normal position, so 'bottom:20px' adds 20 pixels to the element's BOTTOM position"

This means the normal position of red is directely under blue, but because of draggable we added, lets say 20px of space by dragging red down.

If you resize blue, then this 20px of space will be preserved, by moving red down.

When we use position: absolute !important; then red is always positioned "relative to its first positioned (not static) ancestor element" which is orange

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

Upvotes: 1

kblau
kblau

Reputation: 2107

This code should give you some ideas. It works for resizing the blue box and when it hits the top of the red box it stops. So first see that you can not resize the blue since it starts flush to the red. Then MOVE red down a little diagonally to the bottom right. Now, if you resize the blue, it will hit the constraint of the red box.

I showed only one side of the constraint (from blue to red) to see if this helps before applying it to (red to blue). Actually, there would be at least 4 constraints: top, bottom, left, right.

Pay attention to the two css position attributes I added.

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>OOIndex</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <style>
        /*div {
            outline: 1px solid black;
            height: 100%;
            width: 100%;
            height: 200px;
            width: 200px;
            min-height: 30px;
            min-width: 500px;
        }*/

        .resizable {
            width: 150px;
            height: 150px;
            padding: 0.5em;
        }

        .orange {
            height: 100%;
            width: 100%;
            background-color: orange;
            /*added*/
            position: absolute;
        }

        .blue {
            background-color: blue;
            width: 150px;
            height: 150px;
            padding: 0.5em;
        }

        .red {
            background-color: red;
            width: 150px;
            height: 150px;
            padding: 0.5em;
            /*added*/
            position: fixed;
        }
    </style>
    <script type="text/javascript">
        $(function () {

            var targetRed = $('.red').position();
            $("#redPos").text("left " + targetRed.left + " top" + targetRed.top)
            var targetBlue = $('.blue').position();
            $("#bluePos").text("left " + targetBlue.left + " top" + targetBlue.top)

            $('#blueResiz').resizable({
                resize: function (event, ui) {
                    targetPos = $('.red').position();
                    $("#redPos").text("left " + targetPos.left + " top" + targetPos.top)
                    var added = ui.position.top + ui.size.height;
                    $("#bluePos").text("top " + ui.position.top + " height" + ui.size.height + " total " + added)

                    //if blue
                    if (ui.position.top + ui.size.height < targetPos.top) {
                        $(this).resizable({ maxHeight: targetPos.top - 20 });
                    }
                }
            });

            $('#redDrag').draggable({
                drag: function (event, ui) {

                    targetPos = $('.red').position();

                }
            })
        })
    </script>
</head>
<body class="orange">
    <div class="blue draggable" id="blueResiz">
        <div id="bluePos"></div>
    </div>
    <div class="red draggable" id="redDrag">
        <div id="redPos"></div>
    </div>
</body>
</html>

Upvotes: 0

Related Questions