Question

I’m having a bit of a difficult time configuring the jquery UI.Layout plugin. It all seems straightforward when I read the docs but then … things don’t work.

I’m using current version of the plugin 1.3.0 I believe, and google cdn 1.5.1 of jquery. And 1.8.10 for jquery ui, if that matters.

Firstly I’m getting a popup when the page loads:

The layout-container “DIV/#content” has no height.
Therefore the layout is 0-height and hence ‘invisible’!

That seems like a reasonable error message so I modified my css to give #content {height:100%;} and cleared the browser cache but no, problem is still there.

Second issue: although the resizer bar is actually present (I can see it in firebug, and interact with it as long as I know where it is at), it seems like there should be some matching css file with the library to style the resizer. The demos on the UI.Layout page however don’t seem to have any css and they work fine! For example, all I want is something like this, http://layout.jquery-dev.net/demos/example.html, and when I do view source there’s no style or no css included.

What am I missing?

Answer 1

This is REALLY poorly documented.. and I was beating my head against a wall, until I tried this…. you need to setup a CSS rule that explicitly states the vertical height of your “container”.. or that annoying alert will spring forth.. and most likely your Southern Pane won’t show up… Hope this helps!

html, body, #myContainer { 
    width:  100%; 
    height: 100%; 
    overflow: hidden; 
}