CODEWITHSUNDEEP
jqueryjquery-uiresizable
Antihero
Antihero

Reputation: 31

JQuery UI resize issue

Simple situation - two div's and one div which is the box. The outer div is scrollable. The div.box is resizable (w,e). When i try to resize from Right to Left the div.box is collapsed to width:0px.

Live example here: code

I already read everything about jquery-ui resizable, but can't find the solution for me. I'll 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]
});

Upvotes: 3

Views: 1605

Answers (3)

Aj Ay
Aj Ay

Reputation: 47

Its working fine when I removed the containment. I think the containment was stopping it 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>

Upvotes: 0

Antihero
Antihero

Reputation: 31

I found a workaround with parasite div.box-wrap, it's not perfect, but is kind of a solution.

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;
}

The idea is: the parent container is to be in normal flow rendering, not an absolute or relative positioned. Updated version: http://jsfiddle.net/sdoichev/Fac9m/

For now it will do the job.

Upvotes: 0

ChrisSwires
ChrisSwires

Reputation: 2723

Removing your containment call fixes the issue and it's redundant either way as far as I can see:

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

EDIT

Taking into account your comment then, your best bet is probably to use the 'maxWidth' option and set this to the width of your container like so (using the width in the fiddle as an example).

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

Upvotes: 1

Related Questions