Vertical Alignment of Panelbar in Panel

2 posts, 0 answers
  1. George Witte
    George Witte avatar
    1 posts
    Member since:
    Aug 2012

    Posted 18 Jun 2008 Link to this post

    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>

  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 23 Jun 2008 Link to this post

    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
Back to Top