Odd left margin when creating a DockZone

3 posts, 1 answers
  1. Elisa
    Elisa avatar
    2 posts
    Member since:
    Aug 2013

    Posted 01 Aug 2013 Link to this post

    Hello everyone,
    I'm a newbie using RadDocks controls and I'm facing a problem. In fact, I have a panel in my main page, which contains a RadDockLayout, with a RadDockZone and a RadDock inside. However, whatever the width of the RadDockZone, it will always seems to create this huge left margin inside the panel. As you may guess it is very unconvenient and I couldn't find any way to solve it, even with css.
    I joined two pictures to illustrate; the red border corresponds to the panel, and the dashed purple one to the RadDockZone. The first one is a 300px wide RadDockZone, and the second one a 600px wide one.
    This issue may be trivial but if you have any idea or solution please feel free.
    Regards,

    Elisa.
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3599 posts

    Posted 05 Aug 2013 Link to this post

    Hello Elisa,

    Can you confirm you have removed all custom CSS from the page and the issue still manifests? I am asking this because it seems like a CSS rule from a custom stylesheet on the page is causing this, because the following markup works fine for me as it should for you in an empty page:
    <asp:Panel ID="Panel1" runat="server" CssClass="mainPanel">
        <telerik:RadDockLayout runat="server" id="RadDockLayout1">
            <telerik:RadDockZone runat="server" ID="RadDockZone1" Width="100%" Height="100%" CssClass="zone">
                <telerik:RadDock runat="server" ID="RadDock1">
                    <ContentTemplate>
                        content for the dock
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
    </asp:Panel>

    with this CSS:
    .mainPanel
    {
        width: 600px;
        height: 300px;
        border: 1px solid red;
    }
     
    .zone
    {
        border: 1px dashed purple !important;
    }

    which results in the attached screenshot. Of course, the default padding of the zone will distort the borders a bit but this is not the issue here.

    Regards,
    Marin Bratanov
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Elisa
    Elisa avatar
    2 posts
    Member since:
    Aug 2013

    Posted 06 Aug 2013 Link to this post

    Hello,

    Thanks a lot for your quick and very complete reply.
    I tried to remove all custom CSS as you said and it is actually working fine, although it lead me to empty the whole page and do all the CSS form again (screenshots were just little areas from the main page). Plus, I still can't explain where the issue was exactly coming from but whatever, thanks to you it now works !
    Thanks a lot again,

    Regards,

    Elisa.
Back to Top