panelbar item height in IE6

[ewart]

Having grief changing the panelbar item height in IE6.  Works fine in FF2.
Actaully what I really want is a dashed line seperator between panelbar items:

  <telerik:RadPanelItem Text="xxx" ></telerik:RadPanelItem>
  <telerik:RadPanelItem Text="xxx" ></telerik:RadPanelItem>
        [a dashed line seperator here]
   <telerik:RadPanelItem Text="yyy"> </telerik:RadPanelItem>
  <telerik:RadPanelItem Text="xxx" ></telerik:RadPanelItem>
       
I've tried IsSeperator with a border, but the border does not appear
<telerik:RadPanelItem IsSeparator="true"  BorderStyle="Dashed" ></telerik:RadPanelItem>

I've tried using an ItemTemplate and this works well in FF but is buggered (leaves large whitespace gap) in IE6:
         <telerik:RadPanelItem>
        <ItemTemplate>
        <div style="border: dashed 1px #ccc; margin: 0px 5px 0px 5px;"></div>
        </ItemTemplate>
        </telerik:RadPanelItem>

I've tried changing the above in combination with the Height of the item panel, but that property does not seem to have any effect at all on the outputed code:
<telerik:RadPanelItem Height="4px">
        <ItemTemplate>
        <div style="border: dashed 1px #ccc; margin: 0px 5px 0px 5px;"></div>
        </ItemTemplate>
        </telerik:RadPanelItem>

I've tried numerous combinations of CSS override styling with !important to change the height but I can't seem to strike the right one.  
  .RadPanelBar_Vista .rpGroup .rpSeparator
  {
   height: 1px !important;
}

Why doesn't setting the height property on the PadPanelItem work for me?  I'm using a Vista skin.

regards
  ewart

[Paul]

Hi ewart,

In order to achieve your goal your will have to set the needed propertied in the .RadPanelBar_Vista .rpSeparator class. Here's a sample code snippet that show the approach.

.RadPanelBar_Vista .rpSeparator
{
    height: 10px;
    line-height: 10px;
    font-size: 0;
}

Regards,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Markus]

Hi!

Is there a way to acccess the item height with javascript, i need something like:

[code]
 var panelbar = $find("Panelbar1");
 var panelbaritems = panelbar.get_items();
 var panelbarheight = 0;
 for(var i = 0; i < panelbaritems.get_count(); i++)
 {
     panelbarheight += panelbaritems.getItem(i).get_height();
 }
[/code]


thx in advance & kind regards