This is a migrated thread and some comments may be shown as answers.

PanelBar expands beyond initial height after first klick

3 Answers 81 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Softec
Top achievements
Rank 1
Softec asked on 11 Nov 2008, 08:28 AM
Hi

I'm having a strange issue with the PanelBar set FullExpandedItem and 100% height. My panelbar is placed in a div which gets the height 
set by javascript the same time the Splitter next to it (OnClientLoaded / OnClientResized), so far everything works fine. 

PanelBar Markup:
 <UI:PanelBar ID="Navigation" runat="server" Height="100%" Width="175px" ExpandMode="FullExpandedItem" style="position: static; border: 0px;"

On Page Load it looks like this: On load

But after the first klick on a PanelItem the last Item is pushed beneath my footer: After klick

Another problem is if i resize the page (making it higher, smaller works!) the OnClientResized event of the Splitter fires, the height of the 
div gets changed but the PanelBar doesn't use the new free space...
Unfortunately PanelBar doesn't have a set_height() method like other controls, this would be the best approach imho.

Anyone having / had the same problems? Thanks...



3 Answers, 1 is accepted

Sort by
0
Accepted
Paul
Telerik team
answered on 11 Nov 2008, 11:45 AM
Hello Studach,

I think it will be best if you can open a support ticket and send us a simple running project (incl. CSS, images, skins, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

Thanks beforehand for your patience and cooperation,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
virt
Top achievements
Rank 1
answered on 17 Nov 2008, 10:10 PM
Hello,

I'm having the same issue. The PanelBar is located within RadDock. Then only difference is that PanelBar has fixed height. After first click the content of PanelBar extends(hides) below the border of the PanelBar. If browser window is resized the content jumps back and displays normally.

Here is relevant code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %> 
 
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"
    <title></title
</head> 
<body> 
    <form id="form1" runat="server"
    <telerik:RadScriptManager runat="server"
    </telerik:RadScriptManager> 
    <div> 
     
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server" > 
        <telerik:RadDockZone ID="RadDockZone1" runat="server" > 
            <telerik:RadDock ID="RadDock1" runat="server" Skin="Gray" Title="ACTIVITY CENTER" 
                 DefaultCommands="None" EnableDrag="False"
                <ContentTemplate> 
                    <div > 
                        <telerik:RadPanelBar ID="RadPanelBar1" runat="server"  Width="100%"  
                            Height="400px" ExpandMode="FullExpandedItem" Skin="Gray"
                            <CollapseAnimation Duration="100" Type="Linear" /> 
                            <ExpandAnimation Duration="100" Type="Linear" /> 
                            <Items> 
                                <telerik:RadPanelItem Text="ITEM 1" Expanded="true" Width="100%" > 
                                    <Items> 
                                        <telerik:RadPanelItem> 
                                            <ItemTemplate> 
                                                <p> 
                                                    <label>Select Date Range</label><br /> 
                                                </p> 
                                                <p> 
                                                    <label>From</label> 
                                                    <span> 
                                                        <telerik:RadDatePicker ID="rdpFromSC" runat="server"  ImagesPath="~/ASISkin/Calendar" > 
                                                            <DateInput ID="diFromSC" runat="server" ReadOnly="true"></DateInput> 
                                                        </telerik:RadDatePicker> 
                                                    </span> 
                                                </p> 
                                                <p> 
                                                    <label>To</label> 
                                                    <span> 
                                                        <telerik:RadDatePicker ID="rdpToSC" runat="server"  ImagesPath="~/ASISkin/Calendar"
                                                            <DateInput ID="diToSC" runat="server" ReadOnly="true"></DateInput> 
                                                        </telerik:RadDatePicker> 
                                                    </span> 
                                                </p> 
                                                <p> 
                                                    <asp:CheckBox ID="chkViewRemovedSC" runat="server" Text="View Removed" /> 
                                                </p> 
                                                <p> 
                                                    <label>Order #:</label><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
                                                </p> 
                                                <p> 
                                                    <asp:Button ID="btnSearchSC" runat="server" Text="Search" /> 
                                                    <asp:Button ID="btnViewAllSC" runat="server" Text="View All" /> 
                                                </p> 
                                            </ItemTemplate> 
                                        </telerik:RadPanelItem> 
                                    </Items> 
                                </telerik:RadPanelItem> 
                                 
                                <telerik:RadPanelItem Text="ITEM 2" Width="100%" > 
                                    <Items> 
                                        <telerik:RadPanelItem> 
                                            <ItemTemplate> 
                                                <p> 
                                                    <label>Select Date Range</label><br /> 
                                                </p> 
                                                <p> 
                                                    <label>From</label> 
                                                    <span> 
                                                        <telerik:RadDatePicker ID="rdpFromQR" runat="server"  ImagesPath="~/ASISkin/Calendar" > 
                                                            <DateInput ID="diFromQR" runat="server" ReadOnly="true"></DateInput> 
                                                        </telerik:RadDatePicker> 
                                                    </span> 
                                                </p> 
                                                <p> 
                                                    <label>To</label> 
                                                    <span> 
                                                        <telerik:RadDatePicker ID="rdpToQR" runat="server"  ImagesPath="~/ASISkin/Calendar"
                                                            <DateInput ID="diToQR" runat="server" ReadOnly="true"></DateInput> 
                                                        </telerik:RadDatePicker> 
                                                    </span> 
                                                </p> 
                                                <p> 
                                                    <asp:Button ID="btnSearchQR" runat="server" Text="Search" /> 
                                                    <asp:Button ID="btnViewAllQR" runat="server" Text="View All" /> 
                                                </p> 
                                            </ItemTemplate> 
                                        </telerik:RadPanelItem> 
                                    </Items> 
                                </telerik:RadPanelItem> 
                                 
                                <telerik:RadPanelItem Text="ITEM 3" Width="100%" > 
                                    <Items> 
                                        <telerik:RadPanelItem> 
                                            <ItemTemplate> 
                                                <p> 
                                                    <label>Select Date Range</label><br /> 
                                                </p> 
                                                <p> 
                                                    <label>From</label> 
                                                    <span> 
                                                        <telerik:RadDatePicker ID="rdpFromDR" runat="server"  ImagesPath="~/ASISkin/Calendar" > 
                                                            <DateInput ID="diFromDR" runat="server" ReadOnly="true"></DateInput> 
                                                        </telerik:RadDatePicker> 
                                                    </span> 
                                                </p> 
                                                <> 
                                                    <label>To</label> 
                                                    <span> 
                                                        <telerik:RadDatePicker ID="rdpToDR" runat="server"  ImagesPath="~/ASISkin/Calendar"
                                                            <DateInput ID="diToDR" runat="server" ReadOnly="true"></DateInput> 
                                                        </telerik:RadDatePicker> 
                                                    </span> 
                                                </p> 
                                                <p> 
                                                    <asp:Button ID="btnSearchDR" runat="server" Text="Search" /> 
                                                    <asp:Button ID="btnViewAllDR" runat="server" Text="View All" /> 
                                                </p> 
                                            </ItemTemplate> 
                                        </telerik:RadPanelItem> 
                                    </Items> 
                                </telerik:RadPanelItem> 
                                 
                            </Items> 
                        </telerik:RadPanelBar> 
                    </div> 
                </ContentTemplate> 
            </telerik:RadDock> 
        </telerik:RadDockZone> 
        <telerik:RadDockZone ID="RadDockZone2" runat="server" > 
            <telerik:RadDock ID="RadDock2" runat="server" Skin="Gray" Title="Request Summary" 
                 DefaultCommands="None" EnableDrag="False"
                <ContentTemplate> 
                    <div > 
                        <asp:Label ID="lblErrorMessage" runat="server" EnableViewState="False"></asp:Label> 
                         
                    </div> 
                </ContentTemplate> 
            </telerik:RadDock> 
        </telerik:RadDockZone> 
    </telerik:RadDockLayout> 
     
    </div> 
    </form> 
</body> 
</html> 
 

Thank you,
a.
0
Alex Gyoshev
Telerik team
answered on 18 Nov 2008, 11:52 AM
Hello Andrei,

The issue is skin-specific, related to the Gray and Telerik skins, and is caused by the padding of inner item groups.

Please use the following CSS work-around for the problem:

.RadPanelBar_Gray .rpGroup { padding: 0; background: #fff; }
.RadPanelBar_Gray .rpGroup .rpFirst { padding-top: 5px; }
.RadPanelBar_Gray .rpGroup .rpLast { padding-bottom: 5px; }

Best wishes,
Alex
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
PanelBar
Asked by
Softec
Top achievements
Rank 1
Answers by
Paul
Telerik team
virt
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Share this question
or