JQuery UI resizable grid, inconsistent behavior depending on grid value

Question

I need a resizable bar that can go all the way to no bar. Depending on how what I set the grid to, sometimes I can, sometimes I can't. The values I try are multiples of the initial size of the bar.

Here are examples

Working: https://jsfiddle.net/dg851voo/

$("#app-interactionAdjustingTheFractionBarsSTART-question-bar-5").resizable({
  handles: 'n',
  grid: [0, 60]
});

Not working: https://jsfiddle.net/xmzj3x54/

$("#app-interactionAdjustingTheFractionBarsSTART-question-bar-5").resizable({
  handles: 'n',
  grid: [0, 20]
});

I need to be able to go all the way to no height for any multiple of the initial bar size.

Answer 1

I was able to get this working horizontally but not vertically. Possibly a bug with jQuery itself? Instead I came up with a slightly hacky solution that should get the job done.

Basically, if your grid size is 20 then the min height seems to be 20px - even if minHeight is set to 0. You put the resizable div in a wrap div, shift the resizable div down 20px, then you set the wrap to be overflow: hidden. Then if you want to retrieve the perceived height of the div you will have to subtract 20 from the actual height. Example below.

var gridY = 20;

$("#resizable").resizable({
  handles: 'n',
  grid: [0, gridY],
  minHeight: gridY,
  maxHeight: 120,
  resize: function(e, ui){
  	var actualHeight = ui.size.height;
  	var perceivedHeight = actualHeight - gridY;
  	$("p").text(`${perceivedHeight}%`);
    
    // because the height of my div is
    // 100 I dont have to convert it to
    // percentage, but if it was anything
    // other than 100 you would have to 
  }
});

#resizable-wrap{
  width: 100px; 
  height: 100px;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
}

#resizable {
  position: absolute;
  top: 0;
  left: 25px;

  width: 50px; 
  height: 120px;  

  background-color: #F3EF7D;
}

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

<div id="resizable-wrap">
<div id="resizable" class="resizableBox"></div>
</div>
<p>100%</p>