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

Question

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:

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

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

try to look at the margin of your element's -- or post the full style as you see it in the developer mode console. — Soren, Sep 02 '15 at 20:06
@Soren I've added my source so far. However, it looks like it's working now. I'll have to check to be sure it stays that way.... **EDIT** Just realized you asked for the dev console styles (not the source styles), so added those too. — JuSTMOnIcAjUSTmONiCAJusTMoNICa, Sep 03 '15 at 15:26

Soren · Accepted Answer · 2015-09-03T18:51:56.447

0

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

edited Sep 03 '15 at 18:51

answered Sep 03 '15 at 18:27

Soren

14,402
4
41
67

"the inner set of layout frames are not direct decendants" But the outer set are, which is where I want to get rid of the padding "between" the outer and inner split panes. It turns out that Live Preview (Brackets) wasn't updating the layout properly, but refreshing the page it worked. Nevertheless, this way does make them all look consistent. Accepted. :) – JuSTMOnIcAjUSTmONiCAJusTMoNICa Sep 03 '15 at 18:52

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

Source

index.html

style.css

main.js

Dev Console Styles

1 Answers1

`index.html`

`style.css`

`main.js`