jQuery UI layout on a container div instead of body

Question

I'm using jQuery UI layout. I want to apply the layout to a container, not the entire body.

Works when I do $('body').layout();.

http://jsfiddle.net/JPEaa/216/

Fails when I add a container div and do $('.myDiv').layout();.

http://jsfiddle.net/JPEaa/217/

Am I selecting or applying my container incorrectly?

Seemed reasonable since this extends / requires jQuery UI. Also, people that work with jquery-ui will have more knowledge of it. Would you say this question has nothing to do with jquery as well? — Don P, Dec 13 '13 at 00:40
http://layout.jquery-dev.net/documentation.cfm#Depends_on - we should tell the author — Don P, Dec 13 '13 at 00:43
ok..my bad...haven't looked at this for years...has been around a long time — charlietfl, Dec 13 '13 at 00:46
yea looks like the div requires "height". Want to post that answer and get some points? ;) I can't do it yet — Don P, Dec 13 '13 at 00:54

score 8 · Accepted Answer · answered Dec 13 '13 at 00:57

8

You container needs to have an explicit size set. If you add height to your .myDiv it works:

<div class="myDiv" style="height:400px">

http://jsfiddle.net/JPEaa/223/

answered Dec 13 '13 at 00:57

Andy

29,707
9
41
58

score 0 · Answer 2 · answered Jul 23 '15 at 04:05

I also wrap my layout with a div element, such as:

<div class='wrapper'>
   // layout divs go here
</div>

Except that I found it more practical to use the following CSS instead of a fixed height (as Andy has suggested) in order to allow for my layout to properly use the entire browser window and also correctly self adjust as the window was resized.

.wrapper {
   position : absolute;
   width    : 100%;
   margin   : 0 auto;
   top      : 0px;
   bottom   : 0px;
}

Note that due to the position: absolute, this may not be viable for everyone.

jQuery UI layout on a container div instead of body

2 Answers2