javascript - How to make child div occupy full space of parent's div in a resizable bootstrap panel? -
i have resizable bootstrap panel (using jquery ui resizable plugin); trying have <div>
within panel-body
div, occupy space, eg. have div occupying panel body full space resized.
i thought enough define css rules, setting height: 100%;
, width: 100%
doesn't work (why ? new css , sadly can't understand why fails). ended using alsoresize
make sure div
resized @ same time parent, doesn't give satisfactory results.
i tried other magic without success ; don't magic, anyway ;)
for tests put background color yellow ; surprisingly, before first resize <div>
doesn't show !
any , bit of explanations 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 link jsfiddle
i'm not sure if looking adding 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; }
Comments
Post a Comment