[英]React resizable only resizing the width of the box, not the height
[英]jQuery UI resizable changes height when resizing width
我有一个非常简单的DIV元素,我正在尝试调整大小并水平拖动。 它工作正常,但DIV元素的高度也由jQuery UI更改。 我不明白为什么。
有人有想法吗?
JS代码:
$('.task') .draggable({ axis: 'x' }) .resizable({ containment: 'parent', handles: 'e, w' });
HTML代码:
<ul> <li> <div class="task status-green"> <span class="handle-move"></span> </div> </li> </ul>
CSS代码:
li { height: 20px; line-height: 20px; list-style: none; } .task { height: 16px; margin-top: 2px; position: relative; } .task span { display: block; height: 16px; position: absolute; z-index: 10; } .task .handle-move { bottom: 0; cursor: move; left: 10px; right: 10px; top: 0; z-index:1; } .task .ui-resizable-handle { background-color: pink; cursor: e-resize; height: 16px; position: absolute; width: 10px; } .task .ui-resizable-w { left: 0; } .task .ui-resizable-e { right: 0; } .status-green { background-color: green; }
根据我的经验,resizable-function无法尝试管理“box-sizing”css-property。 尝试使用
box-sizing: border-box;
或者为填充物制作内部容器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.