jQuery Ui resizable does not resize with cursor

Question

jQuery Ui resizable does not resize with cursor

124 Views Asked by WushuDrew At 22 November 2022 at 21:37

The root of the problem is that the parent of the element that I want to resize has display: flex. For some reason, the element that I want to resize appears to get less than half the size that I need it to be. In other words, if I drag it 1000px, it only gets bigger by about 400px. here's the fiddle. Drag the blue column to the left.

Code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
    main {
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    #containerParent {
        flex: 1;
        overflow: hidden;
    }

    #panelContainer {
        width: 100vw;
        display: flex;
        height: 100%;
    }

    #leftPanel {
        width: 300px;
        overflow: scroll;
        flex-direction: column;
        display: flex;
        position: relative;
        background-color: #ddffff;
    }

    #results {
        flex: 1 1 0;
        flex-direction: column;
    }

    #rightPanel {
        background-color: #ffddff;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
</style>
</head>
<body>
    <main>
        <nav>
            nav
        </nav>
        <div id="containerParent">
            <div id="panelContainer">
                <div id="leftPanel">
                    <button class="btn btn-primary" type="button" id="populate">button</button>
                    <div id="results">
                    </div>
                </div>
                <div id="rightPanel">
                </div>
            </div>
        </div>
    </main>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

    <script>
        $("#leftPanel").resizable({ handles: "e" });
    </script>
</body>
</html>

Original Q&A

There are 1 best solutions below

**WushuDrew** · Answer 1 · 2022-11-23T20:02:41.270000

I figured it out. You have to host jQueryUI locally and adjust some code.
Since I'm only dealing with width here I'm adjusting props.width = this.size.width + 'px'; to props.flex = `0 0 ${this.size.width}px`;.

If you search for //>>label: Resizable, the _applyChanges function should be somewhere below it.

It should be changed to this:

_applyChanges: function () {
    var props = {};

    if (this.position.top !== this.prevPosition.top) {
        props.top = this.position.top + 'px';
    }
    if (this.position.left !== this.prevPosition.left) {
        props.left = this.position.left + 'px';
    }
    if (this.size.width !== this.prevSize.width) {
        //props.width = this.size.width + 'px';
        props.flex = `0 0 ${this.size.width}px`;
    }
    if (this.size.height !== this.prevSize.height) {
        props.height = this.size.height + 'px';
    }

    this.helper.css(props);

    return props;
},

jQuery Ui resizable does not resize with cursor

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in CSS

Related Questions in JQUERY-UI

Related Questions in FLEXBOX

Related Questions in JQUERY-UI-RESIZABLE

Trending Questions

Popular # Hahtags

Popular Questions