Space Between RadDcoks

9 posts, 2 answers
  1. Paul
    Paul avatar
    3 posts
    Member since:
    Sep 2008

    Posted 10 Sep 2008 Link to this post

    I would like about 3 pixels between each of my RadDocks boxes and I have set the style of each to have a bottom padding of 3px. The problem is that when the page initial loads all the docks are squished together and I have to actually move them and drop them back in place before the padding "shows up". I am using the Office 2007 skin. Any ideas on how to force space between the docks (We are calling them Widgets).

    Thanks

    Paul
  2. -DJ-
    -DJ- avatar
    263 posts
    Member since:
    Oct 2004

    Posted 12 Sep 2008 Link to this post

    Hi Paul.

    If you can't get margins in the css to work, I bet that setting margins in the style elements of the docks will work.

    <telerik:raddock style="margin:3px......etc

    Regards,
    -DJ-
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Paul
    Paul avatar
    3 posts
    Member since:
    Sep 2008

    Posted 16 Sep 2008 Link to this post

    Yeah that didn't work. Thanks for the help though.

    Paul
  5. Answer
    Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 17 Sep 2008 Link to this post

    Hello Paul,

    I am not sure what is your exact setup but if you add the following style between the head tags of the page a 3px space between the docks should be applied:
    <style type="text/css">  
    .raddock  
    {  
        margin-bottom:3px !important;  
    }  
    </style> 
    I have attached a simple sample page which demonstrates the above suggestion. In case you still experience any problems in achieving the desired layout, please, send us code snippets which demonstrate your setup and reproduce the issue. We will be glad to help you.

    All the best,
    Sophy
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Answer
    Paul
    Paul avatar
    3 posts
    Member since:
    Sep 2008

    Posted 17 Sep 2008 Link to this post

    Thanks! That did the trick. I actually tried this before, but I didn't use the "!important" declaration. I guess it really is "important".

    Paul
  7. msigman
    msigman avatar
    141 posts
    Member since:
    Apr 2008

    Posted 06 Oct 2009 Link to this post

    This trick doesn't work in the newest version.  What is the new method to use?
  8. Adam Hubble
    Adam Hubble avatar
    74 posts
    Member since:
    Jan 2008

    Posted 08 Oct 2009 Link to this post

    Hi Matthew,

    You can control the spacing between docks by using the .RadDock_x style (where x is the name of the skin you are using).

    So if you are using the default skin, your style should be:

    .RadDock_Default {margin-bottom:10px !important;margin-right:10px !important;}

    This will give 10px space around all docks. For some reason I have seen problems when using the css shorthand version of styling here i.e. margin: 0 10px 10px 0; but by using the above version it seems to work perfectly. 
  9. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 08 Oct 2009 Link to this post

    Hi Matthew,

    I tested the CSS code and it works with the latest version. Here is the project that I tested:

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .RadDock
            {
                margin-bottom: 10px !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadDockZone1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadDockZone1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                </telerik:RadAjaxPanel>
                <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="600px" Width="300px">
                    <telerik:RadDock ID="RadDock1" AutoPostBack="true" CommandsAutoPostBack="true" runat="server"
                        Width="300px" Title="RadDock1-Title" DockMode="Docked">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            RAD DOCK 1
                            <br />
                            <br />
                            <asp:Button ID="Button1" runat="server" Text="Postback (AJAX)" />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock2" AutoPostBack="true" CommandsAutoPostBack="true" runat="server"
                        Width="300px" Title="RadDock2-Title" DockMode="Docked">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT DOCK 2
                            <br />
                            <br />
                            <br />
                            <asp:Button ID="Button2" runat="server" Text="Postback (AJAX)" />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock3" AutoPostBack="true" CommandsAutoPostBack="true" runat="server"
                        Width="300px" Title="RadDock3-Title" DockMode="Docked">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <asp:Button ID="Button3" runat="server" Text="Postback (AJAX)" />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>

    Please make sure that you are not applying any global CSS styles that might override the above setting. If you still experience problems please send us the source code of your project together with the CSS code (styling) and we will help you resolve the issue.


    Greetings,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  10. James
    James avatar
    53 posts
    Member since:
    Jun 2009

    Posted 13 Oct 2009 Link to this post

    This is the style I used with brilliant results:
    DIV.RadDock 
            { 
                margin-bottom4px
            } 

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017