Problem with RadPanelBar Sizing

[Eric Krauska]

I have an issue in FireFox and Chrome where when initially entering a page, the first PanelItem is expanded incorrectly.  This only occurs when I have an image floating to the right of the PanelBar.  Review the code and test in Firefox or Chrome. You will need to replace the image with an actual image to view this behavior.  IE displays correctly.  Next, remove the image and then the PanelBar exhibits the correct behavior.  Is there a workaround for this?

<div>
<telerik:RadScriptManager ID="_scriptManager" runat="server" />
<img alt="" style="float: right; margin-left: 15px;" src="images/kids4.gif" />
<telerik:RadPanelBar Width="500px" ExpandMode="SingleExpandedItem" ID="_faqs" Runat="server" Skin="Office2007">
<Items>
    <telerik:RadPanelItem runat="server" Text="Quesiton 1?">
        <Items>
            <telerik:RadPanelItem runat="server" Text="Answer" />
        </Items>
    </telerik:RadPanelItem>
    <telerik:RadPanelItem runat="server" Text="q2?">
        <Items>
            <telerik:RadPanelItem runat="server" Text="answer." />
        </Items>
    </telerik:RadPanelItem>
    <telerik:RadPanelItem runat="server" Text="q3?">
        <Items>
            <telerik:RadPanelItem runat="server" Text="answer." />
        </Items>
    </telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>
</div>

[Ted]

While this does look like a bug in the RadPanelBar, you can try this to temporarily fix the issue.  Put a div around the panelBar with style of float left

<

 

div style="float:left">

 

[Paul]

Hi there,

Actually, we admit it's a bug in the control and we'll do our best to fix it for SP2. Meanwhile, a better workaround would be to use the following CSS style:

<style type="text/css">
    div.RadPanelBar .rpItem:after
    {
        clear: left;
    }
    </style>

Best wishes,
Paul
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.