Dojox ContentPane styles not working

Question

I have 2 html pages A and B. Page A has a dojox/layout/contenpane as follows:

<div id="foo" data-dojo-type="dojox/layout/ContentPane" data-dojo-props="renderStyles:true, executeScripts:true"></div>

I am loading the page B inside A using the href attribute of the ContentPane (uses XHR). Page B does show in the ContentPane, but I have 2 problems with this:

1) Page B body tag has a class="claro" attribute which is ignored. (I realized this by comparing the B loaded inside A against just B loaded in a separate browser tab). How do I make this work?

2) The included styles in B overwrite that of the parent page (eg. Body of A has margin:auto, and that of B has margin:0. When I load the ContentPane in A with B, everything in the A shifts from center to left). How do I confine the styles of B just to itself.

I tried looking online for several hours, but I am not making any progress. Any help is appreciated.

Answer 1

You should only load the contents of page B inside the contentPane, excluding the headers and the body tag.

This is done by setting extractContent to true :

<div id="foo" data-dojo-type="dojox/layout/ContentPane" data-dojo-props="renderStyles:true, executeScripts:true, extractContent:true"></div>

The styling must be done in your page A's CSS.