Docking Sliding Pane with Positioned Divs

[David]

I have a sliding pane that contains 2 positioned divs, one with a RadGrid and the other an Image button.  This looks great until I go to dock it.  Docking the sliding pane must actually combine it with the page so then my Div's are being positioned to the entire page and not just the sliding pane.

This is my code snippit of the section in question.

<telerik:RadSlidingPane ID="ColumnsSlider" runat="server" Width="200" Scrolling="None"
    Title="Add Columns" EnableDock="false">
    <div id="attributeGrid" runat="server" style="position:absolute; top:19px; left:5px; right:-2px; bottom:32px; overflow:scroll;">
    <telerik:RadGrid ID="attributeList" runat="server" Skin="Office2007" GridLines="None"
        Width="176px" Height="100%" AutoGenerateColumns="false" AllowMultiRowSelection="true">
        <MasterTableView>
            <Columns>
                <telerik:GridTemplateColumn UniqueName="CheckBoxSelectColumn">
                    <ItemTemplate>
                        <asp:CheckBox ID="attributeCheckbox" runat="server" AutoPostBack="true" OnCheckedChanged="attributeCheckbox_CheckChanged" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn UniqueName="Name" DataField="Name" HeaderText="Name" HeaderStyle-Height="0"
                    DataType="System.String" />
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
    </div>
    <div id="attributeBtn" runat="server" style="position:absolute; left:0px; right:0px; bottom:0px; height:32px;">
        <center>
            <asp:ImageButton ID="btnApplyChanges" runat="server" ImageUrl="Images/btnApplyChanges.gif" OnClick="btnApplyChanges_Click" />
        </center>
    </div>
</telerik:RadSlidingPane>

Any suggestions on to making this look right?

Thanks
David

[Svetlina Anati]

Hi David,

I suggest to apply relative positioning to the parent RadSlidingPane. This can be achieved through CSS class as shown below:

 .ApplyPosition
    {
      position:relative;
    }

 <telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" CssClass="ApplyPosition">
                        <div id="attributeGrid" runat="server" style="position:absolute; top:19px; left:5px; right:-2px; bottom:32px; overflow:scroll;">

Kind regards,
Svetlina
the Telerik team

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