Vertical Alignment of Panelbar in Panel

[George Witte]

I have a vertical splitter with a left and right pane.  In the left pane, I want to insert a panelbar control that vertically aligns at the bottom of the pane whether the browser is resized or not.  I can't seem to get the panelbar to do this, as it continues to align itself to the top.  I tried setting it's CSSClass property to a class that has vertical alignment of "bottom", but that didn't work. 

Any ideas on how to get the panelbar to align at the bottom of the panel I called NavigationPane?

Here's the way my page markup looks:

<!

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" style="height:100%;margin:0px;" >

<

head id="Head1" runat="server">

<title>Help System</title>

</

head>

<

body style="height:100%;margin:0px" scroll="no">

<form id="form1" runat="server" style="height:100%;margin:0px">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div style="height:50px;">

<HS:PageHeader ID="PageHeader1" runat="server" />

</div>

<div style="height:25px;">

<telerik:RadMenu ID="RadMenu1" runat="server">

<CollapseAnimation Duration="200" Type="OutQuint" />

<Items>

<telerik:RadMenuItem runat="server" Text="File">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Edit">

</telerik:RadMenuItem>

</Items>

</telerik:RadMenu>

</div>

<telerik:RadSplitter ID="ParentSplitter" runat="server" Height="100%" Items-Capacity="0" SplitBarsSize="" Width="100%" PanesBorderSize="2" HeightOffset="107" LiveResize="True">

<telerik:RadPane ID="NavigationPane" runat="server" BorderStyle="None" Width="">

<telerik:RadPanelBar ID="NavPanelBar" runat="server" Width="100%" BorderStyle="None" ExpandMode="SingleExpandedItem" Skin="WebBlue">

<CollapseAnimation Duration="100" Type="None" />

<Items>

<telerik:RadPanelItem runat="server" Text="Workorders">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Group mgmt">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Reports">

</telerik:RadPanelItem>

</Items>

<ExpandAnimation Duration="100" Type="None" />

</telerik:RadPanelBar>

</telerik:RadPane>

<telerik:RadSplitBar ID="SplitBar1" runat="server" />

<telerik:RadPane ID="ContentPane" runat="server" Width="">

<telerik:RadSplitter ID="ContentSplitter" runat="server" Height="100%" Orientation="Horizontal"

Width="100%">

<telerik:RadPane ID="GridPane" runat="server" Height="55%">

Grid

</telerik:RadPane>

<telerik:RadSplitBar ID="SplitBar2" runat="server" />

<telerik:RadPane ID="PreviewPane" runat="server" Height="45%">

</telerik:RadPane>

</telerik:RadSplitter>

</telerik:RadPane></telerik:RadSplitter>

<div style="height:25px;"><HS:PageFooter ID="PageFooter1" runat="server" /></div>

</form>

</

body>

</

html>

[Svetlina Anati]

Hi George,

I suggest to set relative position to the parent RadPane and absolute position to the RadPanelBar along with 0px settings for the bottom and left attributes.

For your convenience I prepared a sample demo project which you can find attached to the thread.


Kind regards,
Svetlina
the Telerik team

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