CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Peter Chimp
Peter Chimp

Reputation: 137

Jquery Resizable Handle Left (e) Issue

I have the following sample code that use jQuery Resizable for e, w handles. I can see the "e" handle works as expected, but for "w" it always change the "e" width.

What's wrong? Really appreciate for any help, thank you...


    
    
    
    
        
        
        
            body {
                margin: 50px;
            }
    
            .row {
                width: 900px;
                height: auto;
            }
    
            .col {
                position: relative;
                min-height: 331px;
                height: 331px;
                width: 33.333%;
                background: #ccc;
            }
    
            .handle-w,
            .handle-e {
                background: #fff;
                border: 2px solid #00a0d2;
                border-radius: 50%;
                height: 12px;
                width: 12px;
                cursor: e-resize;
                top: 50%;
                transform: translateY(-50%);
                position: absolute;
            }
    
            .handle-w {
                left: -7px;
            }
    
            .handle-e {
                right: -7px;
            }
        

</head>

<body>
    <div class="row">
        <div class="col">
            <div class="handle-w"></div>
            <div class="handle-e"></div>
        </div>
    </div>

    <script src="external/jquery/jquery.js"></script>
    <script src="jquery-ui.js"></script>
    <script>
        $(document).ready(function () {

            var col = $('.col');

            col.resizable({
                containment: col.closest('.row'),
                handles: {
                    'w': col.find('.handle-w'),
                    'e': col.find('.handle-e')
                },
            });

        });
    </script>
</body>

</html>

Or you can see the live demo in jsfiddle here https://jsfiddle.net/yhutxfvr/

Upvotes: 1

Views: 314

Answers (1)

Sercan
Sercan

Reputation: 5081

The easy way around this issue is to set the handles property as follows:

$(document).ready(function () {
    var col = $('.col');

    col.resizable({
        /* Added the following line of code. */
        aspectRaitio: true,

        containment: col.closest('.row'),

        /* The following line of code has been changed. */
        handles: 'n, e, s, w'
    });
});

enter image description here

Additionally, I suggest you review the following posts. Similar but not synonymous issues are discussed:

Upvotes: 0

Related Questions