Panelbar Linespacing and Font Size

[Ron]

Hello,

I have a panel bar on my page setup similiar to that of Outlook 2007+ on the left hand side and everything seems to work perfectly with expanding and collapsing.  However, the problem I seem to have revolves around text placed inside a template item.  For some reason the test for the <h5> tag is much different from an <h5> outside of the panel bar where it appears both font and size differ.  I do have a rad form decorator applying the same style to h4h5h6.  I do not have any font modification in my CSS, the only font modifications comes from the built in telerik skins applied.  Also, it appears that the text and margins definitions within a template item are double spaced.  So a 10px margin becomes 20 while text is also double spaced.

Any ideas why everything is much different inside the panel bar versus outside of it even though I am applying the same skin both in and out and not defining any additional cutomizations anywhere.

Attached is a screenshot of the difference between the left side with the panel bar and the right side without.

Thanks,
Ron Montecalvo

[Ron]

After diving into the skin CSS files a bit more I could see that the font style was being set with a 12px/24px.  I was simply able to overwrite that with the following:

.rpTemplate

 

 

{

 

     

 

font: normal 12px "Segoe UI", Arial, sans-serif !important;

 

 

 }

I also noticed the problem with the font type was because the form decorator was not applying the same font to the headers that the skin uses in all its controls.  This was resolved by setting the entire site to use the same font style as the skin.  Although this does not make it dynamic based on the skin used, from what I can tell looking at the other skin CSS files, this particular font style is used in all of them.

The only thing I still cannot figure out is what looks to be the padding/margins inside the template of the panel bar.  They still seem like they are doubling whatever I set them too.  There is only one CSS definition in the CSS file for the skin of the panel bar and after modifying it, there was no effect still.  So I am still trying to resolve this.

 

 

[Kamen Bundev]

Hi Ron,

The line-height is different inside RadPanelBar because the normal items are vertically centered and vertical-align: middle works only when line-height is set. On the other hand RadFormDecorator doesn't change the styling of elements which have a set class name, so RadPanelBar wins.

About the padding and margins - A RadPanelBar sub-item has spacing in front of it so the hierarchy can be easily seen, however this shouldn't apply to templates, can you send a live URL so we are able to check why this happens? Thank you in advance.

All the best,
Kamen Bundev
the Telerik team