Clever Geek Handbook

How to make JQuery UI Layout plugin included inside div body Boostrap div

We have used JQuery UI Layout Plugin for most of our projects. We started a new project that uses Bootstrap as a base. We tried a simple example layout using Bootstrap containers, but the layout won't render because the html isn't rendered. I feel like somehow Bootstrap and JQuery UI Layout are not playing well. 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, no HTML is displayed at all (we don't see the text West or Center). But if I changed the HTML to no longer use the body div and use "body" to create the layout, we're 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>

JS work:

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

Here's a JSFiddle it doesn't work and here's a JSFiddle that works.

+3


source to share


2 answers


The problem appears to be related to the height calculations.

The following CSS tweak helps in your demo, although it's not a perfect solution. With some additional CSS checking I'm sure you find the correct final settings to do



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

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

+1


source


This page on the Bootstrap site tells you how to work around this issue. In short, sorting by box: boundary noise around some computation.

If you want to quickly test this, go to your bootstrap css file and comment out the lines that resize the window and then refresh the page - it worked well for me.



Just add this piece of CSS:

.ui-layout-container, .ui-layout-pane {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}
+1


source






More articles:


All Articles