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

Question

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 1

Dynamically adjusting the maxWidth can get what you want.

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

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

<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="blocks">test my block</div>
  <div class="blocks">resize this to end</div>
</div>

<script>
  //calculate flexibly
  var gap = 6;
  $(function() {

    $('#body .blocks:eq(0)').resizable({
      maxWidth: getMaxWidth($('#body .blocks:eq(0)')),
      minHeight: 32,
      minWidth: 15,
      stop: updateMaxWidth
    });
    $('#body .blocks:eq(1)').resizable({
      maxWidth: getMaxWidth($('#body .blocks:eq(1)')),
      minHeight: 32,
      minWidth: 15,
      stop: updateMaxWidth
    });

    function getMaxWidth(e) {
      return $('#body').width() - e.siblings().outerWidth() - gap;
    }

    function updateMaxWidth(e, ui) {
      ui.element.siblings().resizable('option', 'maxWidth', getMaxWidth(ui.element.siblings()));
    }

  });
</script>

or see this demo in codepen.

Answer 2

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>

Answer 3

Just return the container's width in the maxWidth property:

$('.blocks').resizable({
    maxWidth: $('#body').width(),
    minHeight: 32,
    minWidth: 15,
});

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

.blocks {
   width: 500px;
   border: 1px dashed gray;
}

<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="blocks">
     test my block
  </div>
  
</div>


<script>
var body_height = 50;
$(function(){
  
  $('.blocks').resizable({
	  maxWidth: $('#body').width(),
      minHeight: 32,
	  minWidth: 15,
  });
});
</script>