Dojo claro css applying absolute positioning to ContentPane elements

Question

I'm using dojo 1.8 and don't want any padding in my bordercontainer / contentpane layout. The problem is, it seems when I add the claro css file, instead of just applying class styles, the div's i'm using for my content panes get styles applied inline. It almost seems like this is being done programmatically, but only when I add the css file.

For instance, the contentpane I use as my header looks like this:

<div data-dojo-props="region: 'top'" 
   data-dojo-type="dijit/layout/ContentPane" 
   id="header" 
   class="dijitContentPane dijitBorderContainer-child 
     dijitBorderContainer-dijitContentPane 
     dijitBorderContainerPane dijitAlignTop" 
   title="" role="group" widgetid="header" 
   style="left: 5px; top: 5px; position: absolute; width: 1387px;">

It adds the style="left: 5px; top: 5px...." which I'm pretty sure precludes me from just overriding any type of padding or margin setting with css. I want my content panes to not have any padding or "virtual" padding by using absolute positions like this. How can I still use claro but prevent this behavior?

Answer 1

The 5px comes because you have gutters set to true on the BorderContainer.

Add gutters: false to properties of the BorderContainer.

Answer 2

The dijit.layout widgets performs a resize when rendering, calculating the space it has to work with, and setting itself up as according to whichever layout variant it is (BorderLayout child in your case, which is referred to as 'nested containers'). Hence the inline styling, done programatically.

Your problem is most likely, that the CSS you apply yourself has a lower 'weight' then the styling from claro.css.

Check this link: specificity. This is a term, that covers which selector is highest prioriy. The more specific a css-rule is, the higher the priority.

So you need to 'win' over a class-on-class rule like this:

.claro .dijitContentPane {}

To achieve it, add #id selector - or nodetype-selector or similar. You can also put a prefix, such as 'body' to be general or '#innerContentsWrapper' for a localized rule

.dijitContentPane { /* lowest weight */}
.claro .dijitContentPane { /* third highest weight */ }
.claro div.dijitContentPane { /* second highest weight */ }
body .claro div.dijitContentPane { /* the highest weight */ }

Answer 3

Another thing that will work is setting the following attribute on your div:baseClass="dijitContentPaneNoPadding"