CODEWITHSUNDEEP
jqueryjquery-ui
Nitin S
Nitin S

Reputation: 7591

jquery ui resizable resizing to left issue

when I resize the jquery ui resizable element on left side it unexpectedly changes its width.

here's codepen: [CodePen](https://codepen.io/nitinjs-the-typescripter/pen/KxGOqX)

According to this ticket on jquery ui forums this issue is marked as not fixable (6 years ago) https://bugs.jqueryui.com/ticket/9017 I wonder if any workaround available?

Also the resizable stops working when I remove the jquery UI css, how do I use it without jquery ui css?

Upvotes: 0

Views: 990

Answers (1)

user7289982
user7289982

Reputation:

Add position: relative; display: block; to your .tsContainer>.panel and it's working just fine. Try it out.

You can also set height: 100% !important; max-width: 100% for .ui-resizable element so it's not changing it's height while resizing.

You can also add 

$time_scroller.draggable({
    cursor: 'move',
    containment: "#pnlScrollbarContainer",
    drag: function(e, ui) {
        if(ui.position.left < 0)
            ui.position.left = 0;
    }
});

So it's not jumping outside of the box

https://codepen.io/anon/pen/yxQBOG

Upvotes: 2

Related Questions