3

We have been using JQuery UI Layout Plugin for most of our projects. We have started a new project that uses Bootstrap as the framework. We attempted a simple layout example, using Bootstrap containers, but the layout will not render, in fact no html is rendered. My feeling is that somehow Bootstrap and JQuery UI Layout are not playing nicely. Now, for the code:

This is what we are trying to do for HTML:

<div class="container body-content">
    <div class="ui-layout-west">
        <div>West</div>
    </div>
    <div class="ui-layout-center">
        <div>Center</div>
    </div>
</div>

This is what we are trying to do for Javascript:

$(document).ready(function(){
   var globalLayout = $('div.body-content').layout();
});

However, the HTML doesn't render at all (we don't see the 'West' or 'Center' text). But if I change the HTML to no longer use the body-content div and use 'body' to create the layout, we are fine.

Working HTML:

<div class="container body-content"></div>

<div class="ui-layout-west"><div>West</div></div>
<div class="ui-layout-center"><div>Center</div></div>

Working JS:

$(document).ready(function(){
    var globalLayout = $('body').layout();
});

Here is a JSFiddle of it not working and here is a JSFiddle of it working.

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
JasonWilczak
  • 2,303
  • 2
  • 21
  • 37

2 Answers2

1

The issue seems to be with height calculations.

The following CSS adjustment helps in your demo although is not a perfect fix. With some additional CSS inspection I'm sure you will find the proper final adjustments to make

html,body, .container{height:100%}

http://jsfiddle.net/25m9qsar/1

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • Thank you! This appears to be the answer. Give me a few minutes to verify and I will mark it as so, or not, depending :) – JasonWilczak Jan 08 '15 at 15:59
  • it may well be that the heights are set for body & html in the layout CSS and order of loading matters. I didn't dig into it very far – charlietfl Jan 08 '15 at 16:01
1

This page at Bootstrap's site tells you how to circumvent the issue. In short, box-sizing:border-box messes around some calculations.

If you want to test this quickly, go to your bootstrap css file and comment the lines that modify box-sizing, then refresh the page -- this worked well for me.

Just add this CSS snippet:

.ui-layout-container, .ui-layout-pane {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
Alon Weiss
  • 11
  • 2