Background color in BorderLayout

[hilbert24]

Hi,

I am using BorderLayout to create a two column layout with a header and a footer. I am setting a background color for the 'center' region. The background color shows up only till the central region is not scrolled. When it is scrolled, the background color for the part of the region that comes into view as a result of scrolling gets set to white (which is default if I don't set any background color). My code looks like this-

Layout = function()
{
return {
init: function()
{
var layout = new YAHOO.ext.BorderLayout(document.body, {
north: { split:false },
south: { split:false },
west: {
split:false,
initialSize: 200,
collapsible: false
},
center: { autoScroll: true }
});

layout.beginUpdate();
layout.add('north', new YAHOO.ext.ContentPanel('header', { fitToFrame: true }));
layout.add('south', new YAHOO.ext.ContentPanel('footer', { fitToFrame: true }));
layout.add('west', new YAHOO.ext.ContentPanel('left', { fitToFrame: true }));
layout.add('center', new YAHOO.ext.ContentPanel('center', { fitToFrame: true }));
layout.endUpdate();
}
}
}();

YAHOO.ext.EventManager.onDocumentReady(Layout.init, Layout, true);

CSS for center
#center { background: #8888ff; }

Is this the intended behavior or am I doing something wrong here?

Thanks,
Hilbert

[tryanDLS]

Look at the rendered HTML in Firebug, you may need to set the background color of the region div, not the ContentPanel div inside the region.

[hilbert24]

Look at the rendered HTML in Firebug, you may need to set the background color of the region div, not the ContentPanel div inside the region.

Hi Tim,

Thanks for the reply. The rendered html shows some autogenerated divs which encloses the center region. Is a user supposed to know about this autogenerated html? I thought they were quite transparent.

Regards,
Hilbert.

[tryanDLS]

Who are you referring to as 'the user'? You as a developer have to understand what's going on under the covers and how it impacts your application. There's a ton of auto-generated HTML and use of CSS. The only way to know why you're background isn't appearing the way you want is to inspect the HTML and see what element is getting the style applied vs what element is scrolling, etc.