Ultrazz008 Ultrazz008 - 12 days ago 9
CSS Question

jQuery UI resizable - limit to parent width, and leave height to auto

I do need to use jQuery UI resizable with parent limits only to width, and leave height to auto.

As i see it's not possible through regular way, and we have to do something else through jQuery. I've already tried through event

resize
, to get
current height of resizing element
and compare is it close to a
parent
height, if it's
close
, i would increase
height
of
parent
and i'm okay.

But the problem is, it happens (height increased), but jquery ui
keeps somewhere
the
height
of a parent when it started with resize of a element, and it has no effect untill you stop resizing, and try again (it will repeat step, increase once, and won't recognize increased area of parent, untill it's stopped, and started again).

I've created snippets why do i need to use
containment
instead of only
maxWidth
.


I hope someone has some method to do this, i wouldn't mind if someone has idea to do it through
maxWidth
but to has same effect as in snippet with
containment
.

With
containment
it allows me to have two blocks at one row, and when i resize last one to the end, it won't pass to second row, but with
maxWidth
it does pass to next row (that's why
maxWidth
can't help me).

The snippet:



#body {
width: 500px;
border: 1px solid red;
min-height: 50px;
padding: 10px;
height: 50px;
}

.blocks, .blocks2 {
border: 1px dashed gray;
display: inline-block;
min-height: 32px;
width: 150px;
}

#body2 {
width: 500px;
border: 1px solid red;
min-height: 50px;
padding: 10px;
height: auto;
}

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

With containment:<br>
<div id="body">
<div class="blocks">test my block</div>
<div class="blocks">resize this to end</div>
</div>

<br><br><br>
<div style="color: #003c98;">As you can see, second with max-width, goes to next row, but i want to keep it to end if theres two or more of divs at inline position</div>

<div id="body2">
<div class="blocks2">test my block</div>
<div class="blocks2">resize this to end</div>
</div>

<script>
var body_height = 50;
$(function(){

$('.blocks').resizable({
maxWidth: 500,
minHeight: 32,
minWidth: 15,
containment: "#body",
resize: function( event, ui ) {
if (ui.size.height >= body_height-50) {
body_height += 100;
$('#body').css('height', body_height);
}
}
});

$('.blocks2').resizable({
maxWidth: 500,
minHeight: 32,
minWidth: 15
});

});
</script>





Thank you all for your time.

Answer

The following code snippet allows resizing the selected block up to the total width of the container. It sets maxWidth at the start of the resizing operation, allowing the block to take the remaining space on its right.

$(function () {
    var containerWidth = $("#body").width();
    var getCurrentBlockRight = function ($currentBlock) {
        var $parent = $currentBlock.parent();
        return $currentBlock.offset().left + $currentBlock.outerWidth() - $parent.offset().left - parseInt($parent.css("padding-left"), 10);
    };
    $('.block').resizable({
        maxWidth: containerWidth,
        minHeight: 32,
        minWidth: 15,
        start: function (event, ui) {
            var $currentBlock = $(this);
            var width = $(this).width();
            $currentBlock.resizable("option", "maxWidth", width + containerWidth - getCurrentBlockRight($currentBlock));
        }
    });
});
.block
{
    border: 1px dashed gray;
    display: inline-block;
    min-height: 32px;
    width: 130px;
}

#body
{
    width: 500px;
    border: 1px solid red;
    min-height: 50px;
    padding: 10px;
    height: auto;
}
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="body">
    <div class="block">test1</div>
    <div class="block">test2</div>
    <div class="block">test3</div>
    <div class="block">test4</div>
    <div class="block">test5</div>
    <div class="block">test6</div>
    <div class="block">test7</div>
</div>