I have a resizable bootstrap panel (using the jQuery UI resizable plugin); I am trying to have a <div> within the panel-body div, that would occupy all space, eg. to have this div occupying the panel body full space as it is resized.

I thought it would be enough to define some CSS rules, like setting height: 100%; and width: 100% but it doesn't work (why ? I am new to CSS and sadly I can't understand why it fails). I ended up using alsoResize to make sure my div is resized at the same time as its parent, but it doesn't give satisfactory results.

I tried other magic without success ; I don't like magic, anyway ;)

For my tests I put the background color to be yellow ; surprisingly, before the first resize the <div> doesn't even show up !

Any help and a bit of explanations would be appreciated.

CSS:

.dashboard_panel {
    min-height: 200px;
}
.panel-body {
    min-height:200px;
    height:100%;
}
.mydiv {
    background-color:yellow;
    width: 100%;
    height: 100%;
}

HTML:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-md-12">
            <div class="panel panel-info dashboard_panel">
                <div class="panel-heading">id23/emotion/m0</div>
                <div class="panel-body">
                    <div class="mydiv"></div>
                </div>
            </div>
        </div>
    </div>
</div>

JS:

$(".dashboard_panel").resizable({
    alsoResize: ".mydiv, .panel-body"
});

And a link to JSFiddle

I have a resizable bootstrap panel (using the jQuery UI resizable plugin); I am trying to have a <div> within the panel-body div, that would occupy all space, eg. to have this div occupying the panel body full space as it is resized.

I thought it would be enough to define some CSS rules, like setting height: 100%; and width: 100% but it doesn't work (why ? I am new to CSS and sadly I can't understand why it fails). I ended up using alsoResize to make sure my div is resized at the same time as its parent, but it doesn't give satisfactory results.

I tried other magic without success ; I don't like magic, anyway ;)

For my tests I put the background color to be yellow ; surprisingly, before the first resize the <div> doesn't even show up !

Any help and a bit of explanations would be appreciated.

CSS:

.dashboard_panel {
    min-height: 200px;
}
.panel-body {
    min-height:200px;
    height:100%;
}
.mydiv {
    background-color:yellow;
    width: 100%;
    height: 100%;
}

HTML:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-md-12">
            <div class="panel panel-info dashboard_panel">
                <div class="panel-heading">id23/emotion/m0</div>
                <div class="panel-body">
                    <div class="mydiv"></div>
                </div>
            </div>
        </div>
    </div>
</div>

JS:

$(".dashboard_panel").resizable({
    alsoResize: ".mydiv, .panel-body"
});

And a link to JSFiddle

• javascript
• html
• css
• jquery-ui
• twitter-bootstrap

Share Improve this question Follow edited Aug 18, 2014 at 14:50 mguijarr asked Aug 18, 2014 at 14:44 mguijarrmguijarr 7,94066 gold badges4949 silver badges7575 bronze badges 3

• .dashboard_panel { min-height: 200px; } missing a . before. – Nicolas Commented Aug 18, 2014 at 14:47
• A good way to debug this would be to add a different colored 1px border to each div and see where they are in relation to each other. – TylerH Commented Aug 18, 2014 at 14:47
• @Nicolas Copy & Paste error; it's there in the Fiddle. – TylerH Commented Aug 18, 2014 at 14:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I'm not sure if this is what you are looking for but adding this might help:

.panel-body {
    position: relative;
    min-height:200px;
    height:100%;
}

.mydiv {
    position: absolute;
    background-color:yellow;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Updated Fiddle

Your row-fluid and col-md-12 are adding padding (15px each for a total of 30px on left and right).

Change row-fluid to row and remove the col-md-12. The panel will automatically take up the full width on all screen sizes.

<div class="container-fluid">
    <div class="row">
        <div class="panel panel-info dashboard_panel">
            <div class="panel-heading">id23/emotion/m0</div>
                <div class="panel-body">
                    <div class="mydiv"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Updated Fiddle