Positioning controls inside a panel

3 posts, 0 answers
  1. Charles Reid
    Charles Reid avatar
    5 posts
    Member since:
    Mar 2010

    Posted 01 Feb 2012 Link to this post

    I am trying to use the radWindow to represent equipment.  I don't know if it will work or what other control might work.  What I need to do is add a panel to the radWindow and then show controls (other panels, images, and text) inside the panel based on locations inside the panel.  I can get the initial panel to display properly, but when I try to add controls to the panel they display based on 'static' positioning.  If I try to set the positioning to 'absolute', the entire panel draws over top of the radWindow.  I assume this is due to the rendering of the radWindow itself.  Is this even possible?  Is there a better rad control to use?

    Browser = Chrome 16.0.
    OS = Windows 7.
    Target = .Net 3.5
    Language = C#
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4529 posts

    Posted 02 Feb 2012 Link to this post

    Hello,

    Please examine the following example:
    <telerik:RadWindow runat="server" ID="rw1" VisibleOnPageLoad="true">
        <ContentTemplate>
            <asp:Panel ID="Panel1" runat="server" Style="position: relative; border: 1px solid blue;">
                some other content
                <br />
                that is inside the main container
                <asp:Panel ID="Panel2" runat="server" Style="position: absolute; top: 50px; left: 50px;
                    width: 100px; height: 100px; border: 1px solid red;">
                    an element that is positioned relatively to the main container
                </asp:Panel>
            </asp:Panel>
        </ContentTemplate>
    </telerik:RadWindow>

    Note how the main panel has relative position set. This allow the second panel to calculate its absolute position according to it, not to the Radwindow. This is how absolute positioning works, it is relative to the first parent that is not static in the page, which originally is the RadWindow's wrapper.

    I am attaching a screenshot how this works on my end. I hope this is the desired behavior.

    All the best,
    Marin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. Charles Reid
    Charles Reid avatar
    5 posts
    Member since:
    Mar 2010

    Posted 02 Feb 2012 Link to this post

    Thanks for the reply.  I had solved the problem, I thought, with similar code.  I added a panel within a panel but the absolute positioning seemed to always go to the top left of the radWindow.  I ended up using relative positioning for all the panels, which made positioning them problematic.  I think the difference between your code and mine is that i didn't specify the initial panel as 'position:relative'.  In any event I am using your solution since it allows me to use 'position:absolute' which is much easier to code in the long run.

    Thanks again.

    Charles
Back to Top