Geek asks and answers

JQuery UI Resizing

A simple situation is two divs and one div, which is a field. The outer div scrolls. Div.box resizes (w, e). When I try to resize from right to left, div.box is compressed to a width: 0px.

Here is an example: code

I already read all about jquery-ui resizable, but can't find a solution for me. I would appreciate any help.

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]
});
+3
source share
3 answers

Removing your lock request fixes the problem and it is redundant anyway, as far as I can see:

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

EDIT

, "maxWidth" ( ).

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

parasite 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/

.

0

His work stops when I remove the protective shell. I think the containment stopped him from resizing. 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>
Run codeHide result
0
source

More articles:


All Articles