可调整大小的div不会改变"左"属性

Question

我正在尝试使用jQuery UI的resizable()方法和flexbox(也许这就是问题？但我说不太可能).

我有3列,我希望左右列可调整大小,并使中心列占用任何剩余空间.我的CSS看起来像这样:

.container {
  display: flex;
}

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

.col-center {
  flex: 1;
}

左列适用于此jquery:

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

并且在调整大小时添加的唯一属性是width,但是当我将其用于右列时:

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

宽度和左侧属性被添加.左边的房产真的搞砸了布局.它将左列拉到中心柱上,同时也用宽度将其压扁,因此最终结果非常糟糕.在我的检查员中,如果我删除左侧属性,它似乎工作得很好.

我已经在这里阅读了几次文档,但是我没有看到任何地方我会如何关闭它.

这是我重新创建问题的笔:http: //codepen.io/dustindowell/pen/NPyaBL

一个解决方法是监听resize事件并只是覆盖CSS但这看起来很糟糕.

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

更新:

经过一番挖掘后,我发现这是一个jQuery UI bug.

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

Answer 1

我也遇到过同样的问题.

我发现了另一种解决方法:覆盖CSS中的内联样式.自从resizable()更改内联样式后,您可以执行以下操作:

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

这将永久覆盖它; .css()每次尺寸变化时都不需要打电话.