Getting old size values from jquery.ui.resizable

Question

I am trying to get the new size of a div after resizing. However when using ui.size.height or $(e.target).height() I am getting instead the original height of the element.

function allowResizing(el){
  $(el).resizable({
        animate: true,
        containment: "parent",
        helper: "ui-resizable-helper",
        minWidth: 250,
        minHeight: 250,
        grid: [20, 20],
        stop: function( e, ui ) {
            console.log("height: " + $(e.target).height())
            console.log("height: " + ui.size.height)
            console.log("originalHeight: " + ui.originalSize.height)
        }
    });
}

All three logs write the same value. When I try this code on any other div on another page I get the right values.

My hmtl:

<style>
.containment-wrapper > .row{
    border: 3px solid white;
    width: 100%;
    height: calc(100vh - 200px);
    min-height: 200px;
    position:relative;
}

.ui-resizable-helper {
 border: 2px dotted #b1b1b1; 
}
</style>

<div class="containment-wrapper">
   <div class="row">                                
     <div id="resizable" class="ui-draggable ui-draggable-handle" style="position: absolute !important; outline: 1px solid white;">
        <div class="Container_Header">
            <span style="display: block; padding: 0 10px" class="Text_H2">$title</span>
        </div>
        <p style="padding: 10px">
          Some text
        </p>
     </div>
     <script type="text/javascript">
        allowResizing("#resizable")
     </script>
   </div>
</div>

I also use ui.Draggable on the same element but also tried without it.

Appreciate every help. Thank you

Answer 1

Since you have defined a Helper, you will want to review the Size of that element.

$(function() {
  function allowResizing(el) {
    $(el).resizable({
      animate: true,
      containment: "parent",
      helper: "ui-resizable-helper",
      /*
      minWidth: 250,
      minHeight: 250,
      grid: [20, 20],
      */
      resize: function(e, ui) {
        log("Height: " + ui.size.height);
      },
      stop: function(e, ui) {
        log("El height: " + $(ui.element).height());
        log("Stop height: " + ui.size.height);
        log("Original Height: " + ui.originalSize.height);
        log("Helper Height: " + ui.helper.height());
      }
    });
  }

  function log(str) {
    var log = $("#log").length ? $("#log") : $("<div>", {
      id: "log"
    }).appendTo("body");
    log.append(`<p>${str}</p>`).scrollTop(log.prop("scrollHeight"));
  }

  allowResizing("#resizable");
});

.containment-wrapper>.row {
  border: 3px solid white;
  width: 100%;
  height: calc(100vh - 200px);
  min-height: 200px;
  position: relative;
}

.ui-resizable-helper {
  border: 2px dotted #b1b1b1;
}

#log {
  font-size: 65%;
  height: 4em;
  overflow: auto;
}

#log p {
  padding: 0;
  margin: 0;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="containment-wrapper">
  <div class="row">
    <div id="resizable" style="position: absolute !important; outline: 1px solid white;">
      <div class="Container_Header">
        <span style="display: block; padding: 0 10px" class="Text_H2">$title</span>
      </div>
      <p style="padding: 10px">
        Some text
      </p>
    </div>
  </div>
</div>