JSFiddle - React, Tailwind, and code Playground

by ilancopelyn

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<div style="padding-left:20px;">
    <h1>Popup</h1>
    <p>jQuery UI 1.11.3 resizable() miscalculates container width on Start resize for border-box elements, e.g.:
    <ul>
        <li>try resize "border-box = broken" width, watch how right edge of box pops 20px (= border-width) inwards immediately on start drag</li>
        <li>note this will reduce on every resize start - making the #popupContent red box appear to grow wider on each resize</li>
        <li>now try "content-box = working" - note no problems</li>
    </ul>
    </p>
    <div id="popup" style="position:fixed;border: 20px solid #e7eaec;box-sizing:border-box;">
        <div>
            <b>border-box = broken</b>
        </div>
        <div id="popupContent" style="width:200px;height:200px;margin:0;background-color: red;opacity:0.5;">
        </div>
    </div>
    <div style="width:10px;"></div>
    <div id="popup2" style="position:fixed;left:400px;border: 20px solid #e7eaec;box-sizing:content-box;">
        <div>
            <b>content-box = working</b>
        </div>
        <div id="popupContent2" style="width:200px;height:200px;margin:0;background-color: red;opacity:0.5;">
        </div>
    </div>
</div>

JavaScript

$(function () {
    $('#popup')
        .resizable({
            handles: "n, e, s, w",
            alsoResize: '#popupContent',
            start: function (event, ui) {
                console.log('Start');
                printDimensions('#popup', '#popupContent');
            },
            stop: function (event, ui) {
                console.log('Stop');
                printDimensions('#popup', '#popupContent');
            }
        })
        .draggable();

    $('#popup2')
        .resizable({
            handles: "n, e, s, w",
            alsoResize: '#popupContent2',
            start: function (event, ui) {
                console.log('Start');
                printDimensions('#popup2', '#popupContent2');
            },
            stop: function (event, ui) {
                console.log('Stop');
                printDimensions('#popup2', '#popupContent2');
            }
        })
        .draggable();
});

function printDimensions(p, pc) {
    var popup = $(p),
        popupContent = $(pc),

        calcs = {
            popup: {
                width: popup.width(),
                height: popup.height(),
                outerWidth: popup.outerWidth(),
                outerHeight: popup.outerHeight(),
                outerWidthTrue: popup.outerWidth(true),
                outerHeightTrue: popup.outerHeight(true),
                innerWidth: popup.innerWidth(),
                innerHeight: popup.innerHeight()
            },
            popupContent: {
                width: popupContent.width(),
                height: popupContent.height(),
                outerWidth: popupContent.outerWidth(),
                outerHeight: popupContent.outerHeight(),
                outerWidthTrue: popupContent.outerWidth(true),
                outerHeightTrue: popupContent.outerHeight(true),
                innerWidth: popupContent.innerWidth(),
                innerHeight: popupContent.innerHeight()
            }
        };

    console.log(JSON.stringify(calcs));
}