Panel bar item height

[jeevitha]

Hi,
I need to reduce the panel bar item height. I have overwrite in the css file. but its not reflecting in the UI (other chanes are reflecting). Pls help me to achieve this

.RadPanelBar_Web20 .rpGroup .rpLink,
.RadPanelBar_Web20 .rpGroup .rpTemplate
{
    color: #000;
    background-color: transparent;
    background-image: none;
        
    line-height: 5px;
    min-height:  5px;
}
* html .RadPanelBar_Web20 .rpGroup .rpLink { height: 5px; }

Thanks,
Jeevitha

[Paul]

Hi Jeevitha,

Just add the !important clause, i.e.

.RadPanelBar_Web20 .rpGroup .rpLink,
.RadPanelBar_Web20 .rpGroup .rpTemplate
{
    color: #000 !important;
    background-color: transparent !important;
    background-image: none !important;
    line-height: 5px !important;
    min-height: 5px !important;
}
* html .RadPanelBar_Web20 .rpGroup .rpLink
{
    height: 5px !important;
}

Best wishes,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[jeevitha]

Thanks Paul

[jeevitha]

I have one more question. how shall we make the font as normal in submenu items. The mian menu items are looks bold if i use the folg code. but this style applied for submenu also. i want my submenu with normal font.


.RadPanelBar_Web20 .rpLink,
.RadPanelBar_Web20 .rpTemplate
{
    color: #fff;
    font: bold 12px/24px Verdena, Arial, sans-serif;
}

I tried the follg but not worked

RadPanelBar_Web20.rpText
{
    font-size:11px;
    font-family:Verdana;
    font-weight:normal !important;
}

[Princy]

Hi Jeevitha,

Try out the following code instead:
aspx:

<telerik:RadPanelBar ID="RadPanelBar1" Skin="Web20" runat="server">
    <Items>
      <telerik:RadPanelItem CssClass="PanelItem" Text="item1">
        <Items>
            <telerik:RadPanelItem Text="subitem1"></telerik:RadPanelItem>
            <telerik:RadPanelItem Text="subitem2"></telerik:RadPanelItem>
            <telerik:RadPanelItem Text="subitem3"></telerik:RadPanelItem>
            <telerik:RadPanelItem Text="subitem4"></telerik:RadPanelItem>
       </Items>
     </telerik:RadPanelItem>
     <telerik:RadPanelItem CssClass="PanelItem" Text="item2"></telerik:RadPanelItem>
     <telerik:RadPanelItem CssClass="PanelItem" Text="item3"></telerik:RadPanelItem>
   </Items>
</telerik:RadPanelBar>

css:

.PanelItem
    {
        color: #fff;
        font: bold 24px Verdena, Arial, sans-serif !important;
    }

Hope this helps..
Princy.

[jeevitha]

Thanks Princy it works..