![](/img/trans.png)
[英]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.