Resizable div that doesn't change "left" property

Question

I'm trying to use jQuery UI's resizable() method with flexbox (Maybe that's the problem? But I'd say not likely).

I have 3 columns and I want the left and right columns to be resizable and have the center column take up any remaining space. My CSS looks like this:

.container {
  display: flex;
}

.col-left,
.col-right {
  width: 200px;
}

.col-center {
  flex: 1;
}

The left column works fine with this jquery:

$('.col-left').resizable({
  handles: 'e'
});

And the only property that gets added when resized is width, but when I use this for the right column:

$('.col-right').resizable({
  handles: 'w'
});

The width AND left properties get added. The left property really messes up the layout. It pulls the left column over the center column while also squishing it with the width, so the end result is really wonky. In my inspector, if I remove the left property it seems to work just fine.

I've read through the documentation here a few times, but I don't see anywhere how I would turn this off.

Here's a pen where I've recreated the problem: http://codepen.io/dustindowell/pen/NPyaBL

A workaround would be to listen for the resize event and just overwrite the CSS but this seems bad.

$('.col-right').resizable({
  handles: 'w'
}).on('resize', function() {
  $(this).css({
    left: 0
  });
});

UPDATE:

After some digging around I found out that this is a jQuery UI bug.

Bug Ticket: http://bugs.jqueryui.com/ticket/4985#comment:1

Answer 1

I've encountered the same issue too.

I found another work-around: Overriding inline styles in CSS. Since resizable() changes the inline styles, you can do something along the lines of:

.col-right[style]{
  left:0 !important;
}

This will override it permanently; you will not not need to call .css() every time the size changes.