jqueryjquery-uijquery-layout

How do I create a "sidebar" layout with jQuery Layout?

I'm creating a web application that will have multiple panes. I've used some Dojo in the past, but it's too heavy for this project, so I plan to use jQuery Layout instead.

However, I like the way Dojo's BorderContainers allow you to use a "sidebar" design, where the east and west panes are full height, instead of the default north and south panes at full width. Is there a way to use or emulate this look with jQuery Layout?

I have tried nesting a horizontal split layout inside a vertical split layout, but Layout adds so much padding it doesn't look right:

enter image description here

And when I set .ui-layout-pane { padding: 0 } it's even worse:

enter image description here

But if there's a nicer way to remove the padding, that might work too.

Source

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style/lib/jquery-layout/layout-default.css"/>
    <link rel="stylesheet" href="style/style.css"/>

    <script src="js/lib/jquery.min.js"></script>
    <script src="js/lib/jquery-ui.min.js"></script>
    <script src="js/lib/jquery.layout.js"></script>
    <script src="js/main.js"></script>
  </head>

  <body>
    <div class="ui-layout-west"></div>
    <div class="ui-layout-center">
      <div class="ui-layout-center"></div>
      <div class="ui-layout-south"></div>
    </div>
  </body>
</html>

style.css

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body > .ui-layout-pane {
  padding: 0;
}

main.js

jQuery(function($) {
  $("body").layout({
    west: {
      size: "20%",
      minSize: "10%",
      maxSize: "50%",
    },
    center: {
    }
  });

  $("body > .ui-layout-center").layout({
    center: {
    },
    south: {
      size: "10%"
    }
  });
});

Dev Console Styles

element.style {
    position: absolute;
    margin: 0px;
    left: 215px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    height: 1137px;
    width: 837px;
    z-index: 0;
    display: block;
    visibility: visible;
    overflow: hidden;
}

body > .ui-layout-pane {
    padding: 0;
}

.ui-layout-pane {
    background: #FFF;
    border: 1px solid #BBB;
    padding: 10px;
    overflow: auto;
}

/* user agent stylesheet */

div {
    display: block;
}

/* Inherited from body.ui-layout-container */

body {
    font-family: Lucida Grande, Lucida Sans, Geneva, Arial, Helvetica, sans-serif;
    font-size: 100%;
    background-color: #EEE;
}
Solution

  • The problem is in your CSS -- in particular the ">" operator -- it means "direct descendants of", and guess what, the inner set of layout frames are not direct descendants.

    Change

    body > .ui-layout-pane {
    padding: 0;
}

    To

    body .ui-layout-pane {
    padding: 0;
}

    (or leave the "body" out completely) and it would work for you

    See working example here