PDA

View Full Version : How best to give margin / padding to a ContentPanel?



christocracy
27 Oct 2006, 9:29 AM
assigning margin / padding to the css class .ylayout-panel screws up the size of the ContentPanel, since ContentPanel::setSize() doesn't take it into account. the result is offset content and scrollbars.

would it make sense to be able to assign margin/padding to teh ContentPanel constructor.

the alternative is to use container divs.

eg:


<WEST>


<CENTER>



...


<EAST>






this.layout = new YAHOO.ext.BorderLayout(this.id, {
west: {
initialSize: 180,
collapsible: false
},
center: {
autoScroll: true
},
east : {
initialSize: 200,
autoScroll:true,
titlebar: true
}
});
this.layout.beginUpdate();
this.layout.add('west', new YAHOO.ext.ContentPanel('AlbumCoverImage'));
this.layout.add('center', new YAHOO.ext.ContentPanel('AlbumDetails'));
this.layout.add('east', new YAHOO.ext.ContentPanel('TrackList', {title: 'Tracks'}));
this.layout.endUpdate();


The above example attached padding to each ContentPanel's div via style="padding:10px;", but ContentPanel::setSize will not take that into account when it calculates the size of the panel, resulting in offset content and scrollbars.

the alternative is to use "container" divs.


<WEST>




<CENTER>




...



<EAST>

jack.slocum
27 Oct 2006, 9:49 AM
Wrapping divs is always a good idea. :)

The LayoutManager uses box-model adjustments to make the offsetWidth whatever you pass, automatically recalculating for padding and borders. So if you say it should be 200 pixels wide, the panel is 200 pixels wide regardless of padding or borders.

For margins within the layout (this is in the current version and I'm not sure if it works in the version on my site):



west: {
margins: {top:2, left:2, right: 2, bottom:0},
cmargins: {top:0, left:0, right: 0, bottom:0}
}


margins defines the panel's spacing from other panels, cmargins defines the spacing when the panel is collapsed.

christocracy
27 Oct 2006, 9:57 AM
That's what I was fishing for (margin, cmargin)
cheers again.

jack.slocum
27 Oct 2006, 10:27 AM
I try to think ahead ;)

christocracy
27 Oct 2006, 10:46 AM
what is "cmargins"?

I gave them some big numbers to see what would happen and I didn't see anything happen.

jack.slocum
27 Oct 2006, 12:58 PM
From above:

"margins defines the panel's spacing from other panels, cmargins defines the spacing when the panel is collapsed."