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
0
Accepted
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.
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
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:
Thank you,
a.
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> |
| <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
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.
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.