How to get rid of margins in jquery layout

Question

I am using jquery layout and I have a very hard time getting rid of the margins on the panes. There is always a margin and no amount of css will get rid of them. I am implementing the simple demo.simple demo So basically I want the same thing but without any margins/padding on the inner panes. I'll adjust these my self. The objective is to be able to put a background image in there that stretches from border to border.

Hope I am clear enough.

Answer 1

I think the following CSS rule might fix your problem:

.ui-layout-pane {
  padding: 0px !important;
}

Unfortunately it looks like the pane plugin does a lot of absolute positioning and so it's likely the sizes of the containers will now be off by 20px each. You could write some jQuery to fix that, maybe:

jQuery('.ui-layout-pane').each( function() {
  var el = jQuery(this);
  el.width( el.width() + 20 );
} );

...or somesuch, but... yea, it's not ideal. You might want to look for a different plugin or modify the source of this one to account for the 20px discrepancy in the sizes of the panes.

Answer 2

I'm using a newer version of UI Layout than when the O.P. created this question, but, I think this pane option has been around a little while. The following worked for me, and shouldn't require hacking (rather scouring the source / reading the docs)

Try setting applyDefaultStyles to false. (or maybe now it's called applyDemoStyles)

E.g.

$("body").layout({applyDefaultStyles:false});

or

$("body").layout({applyDemoStyles:false});

---

UPDATE:

FWIW - I'm using the complex layout -- jquery.layout 1.3.0 - Release Candidate 30.79

Specifically, this worked for my "west sidebar" inner settings pane. For me, applyDefaultStyles controls the unwanted white padding for the pane I was targeting. There are different ways to declare settings for the different panes. I used 'list format' which looks like this...

//'list format'
westSidebarSettings_Inner = {
  applyDefaultStyles: false  // basic styling for testing & demo purposes
  , // (other settings ommitted in this stackoverflow snippet for brevity)
}

//'sub-key format'
var layoutSettings_Outer = {
  name: "outerLayout" 
  // options.defaults apply to ALL PANES - but overridden by pane-specific settings
 , defaults: {
    size: "auto"
    , minSize: 50
    , paneClass: "pane"         // default = 'ui-layout-pane'
    , resizerClass: "resizer"   // default = 'ui-layout-resizer'
    , togglerClass: "toggler"   // default = 'ui-layout-toggler'
    , buttonClass: "button" // default = 'ui-layout-button'
  }
 , north: {
    spacing_open: 21                // cosmetic spacing
    , togglerLength_open: 21        // to HIDE the toggler button, set = 0
    , togglerLength_closed: 21      // "100%" OR -1 = full width of pane
  }
}


$(document).ready(function () {
  // create the OUTER LAYOUT
  outerLayout = $("body").layout(layoutSettings_Outer);

  // create an INNER LAYOUT to split my west sidebar into 2 pieces 
  // (actual settings ommitted in this stackoverflow snippet for brevity)
  innerLayout = $(outerLayout.options.west.paneSelector).layout(westSidebarSettings_Inner);
});