Question

我有一个可编辑的文本块，我希望可以调整大小。如果我在其中放置句柄，除了该元素是可编辑的，用户可以在编辑时删除句柄，所有工作都很完美：

<div id="drag-area">
    <div id="text-block" class="lighter-heading hidden text-block">
        <div class="editable-text" contenteditable>
            Editable block
           <div class="ui-resizable-handle ui-resizable-nw nw handle"></div>
           <div class="ui-resizable-handle ui-resizable-ne ne handle"></div>
           <div class="ui-resizable-handle ui-resizable-sw sw handle"></div>
           <div class="ui-resizable-handle ui-resizable-se se handle"></div>
        </div>  
    </div>
</div>

http://jsfiddle.net/3Ve4U/154/

如果我尝试在父div中放置句柄，则元素根本不会变得可调整大小：

<div id="drag-area">
    <div id="text-block" class="lighter-heading hidden text-block">
        <div class="editable-text" contenteditable>
            Editable block
        </div>  
        <div class="ui-resizable-handle ui-resizable-nw nw handle"></div>
        <div class="ui-resizable-handle ui-resizable-ne ne handle"></div>
        <div class="ui-resizable-handle ui-resizable-sw sw handle"></div>
        <div class="ui-resizable-handle ui-resizable-se se handle"></div>
    </div>
</div>

http://jsfiddle.net/3Ve4U/155/

有什么建议吗？

Answer 1

尝试改变：

   .editable-text {
    min-width: 50px;
    max-width:400px;
    min-height: 18px;
    position: absolute;    
}

检查：http://jsfiddle.net/3Ve4U/157/

可调整大小的外部手柄

1 个答案: