UI.Layout jquery plugin

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?

I'm able to resize, open/close, etc. so I feel like it's just a css issue...but like I said I can't find any 'default' css...does anyone know where I can find that? — Kevin
– Kevin, Commented Apr 2, 2011 at 1:25

Alex Gray · Accepted Answer · 2011-07-11 00:31:40Z

10

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

answered Jul 11, 2011 at 0:31

Alex Gray

16.5k9 gold badges99 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kevin Over a year ago

I gave up on this a long time ago, but hopefully your answer will be useful to someone.

bully Over a year ago

Hey Alex, thanks for your apply, this did the trick for me and ended up my pain of trying to set this stuff up. Thanks!

ericbae Over a year ago

In addition, with the latest layout manager, you also have to place the "position:absolute" rule.

Andrew Cetinic Over a year ago

Thank you so much @ericbae and alex gray. Both have resolved a problem I have been having for hours now.

Domi · Accepted Answer · 2014-03-26 10:41:08Z

1

The previous answer won't work properly if your divs are initially empty. The following does the trick, without scrollbars showing up:

#myContainer {
    width : 100%;
    height : 100%;
    position:absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

answered Mar 26, 2014 at 10:41

Domi

24.9k19 gold badges104 silver badges133 bronze badges

1 Comment

Victor L Over a year ago

I had to add min-width: 1px; min-height: 1px; to make it work

PokerFace · Accepted Answer · 2016-10-05 14:16:26Z

Maybe this is the real reason. https://ianstormtaylor.com/rendering-views-in-backbonejs-isnt-always-simple:

render : function () {
    this.$el.html(this.template(options));
    return this;
}

That makes sense, and works perfectly if you never deal with subviews. But as soon as you need subviews—which in any real app seems to happen fairly early on—you’ll realize that jQuery’s .html() calls .empty() first, which unbinds all jQuery events on all child nodes. So the first time you render() everything works fine, but as soon as you call it again all of the events defined in this.events in your subviews will be unbound.

Collectives™ on Stack Overflow

UI.Layout jquery plugin

3 Answers 3

4 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Related