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 already answered your other ticket and for your convenience I am pasting the answer below:

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;">

Greetings,
Svetlina
the Telerik team

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

[David]

I tried adding position:relative to my css for the sliding pane and this does not fix the problem.  I still have the exat some results where the Radgrid and button reposition themselves to the page and not the pane.

Thanks
David

[David]

Sorry, you answered my question correctly in a way.  What I needed to do was to make my RadGrid positioned Relativily.  That way it is positioned to the Pane and not the Page.

Thanks for helping in my easy problem.

David