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. Ill ajust these my self. The objective is to be able to put a background image in there that strechesfrom 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.