How to make JQuery UI Layout Plugin work inside Boostrap body-content div

Question

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.

Answer 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

Answer 2

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