Question

简单的情况 - 两个div和一个div就是盒子。外部div是可滚动的。 div.box是可调整大小的（w，e）。当我尝试从右到左调整大小时，div.box折叠为宽度：0px。

此处的实例：code

我已经阅读了有关jquery-ui resizable的所有内容，但无法找到适合我的解决方案。我会感激任何帮助。

HTML：

<div class="container-scroll">
    <div class="container">
        <div class="box"></div>
    </div>
</div>

CSS：

.container-scroll {
    display:block;
    width:500px;
    height:100px;
    overflow:scroll;
    border:1px solid #666;
}
.container {
    display:block;
    position:relative;
    width:1000px;
    height:100px;
    padding:20px 0;    
    background-color:#eee;
}
.box {
    display:block;
    position:absolute;
    width:1000px;
    left:0;
    /*right:0;    */
    height:50px;
    background:red;
}

使用Javascript：

$('.box').resizable({
    containment: 'parent',
    handles: 'w, e',
    grid: [10,10]
});

Answer 1

删除你的收容调用解决了这个问题，就我所见，它是多余的：

$('.box').resizable({
    handles: 'w, e',
    grid: [10,10]
});

编辑

考虑到你的评论，你最好的选择可能是使用'maxWidth'选项并将其设置为容器的宽度，如此（以小提琴中的宽度为例）。

$('.box').resizable({
    maxWidth: 1000,
    handles: 'w, e',
    grid: [10,10]
});

Answer 2

我找到了寄生虫div.box-wrap的解决方法，它并不完美，但它是一种解决方案。

HTML：

<div class="container-scroll">
    <div class="container">
        <div class="box-wrapper">
            <div class="box"></div>
        </div>
    </div>
</div>

CSS

.box-wrapper {
    width:100%;
    height:50px;
    background-color:#fc3;
}

这个想法是：父容器将处于正常流渲染中，而不是绝对或相对定位。更新版本：http://jsfiddle.net/sdoichev/Fac9m/

现在它将完成这项工作。

Answer 3

当我取下收容箱时它的工作正常。我认为收容是阻止它调整大小。 http://jsfiddle.net/4awJm/15/

$('.box').resizable({
    
	handles: 'w, e',
    grid: [50,10]
});

.container-scroll {
    display:block;
    width:500px;
    height:100px;
    overflow:scroll;
    border:1px solid #666;
}
.container {
    display:block;
    position:relative;
    width:1000px;
    height:100px;
    padding:20px 0;    
    background-color:#eee;
}
.box {
    display:block;
    
    left:0;
    right:0;    
    height:50px;
    background:red;
}

<div class="container-scroll">
    <div class="container">
        <div class="box"></div>
    </div>
</div>

JQuery UI调整大小问题

3 个答案: