Remove 4pixel between RadDock and DockZone

6 posts, 1 answers
  1. Ly Hung
    Ly Hung avatar
    8 posts
    Member since:
    Nov 2007

    Posted 24 Jun 2008 Link to this post

    Hi all!
    In Q1 2008 SP1, there's always 4pixel between RadDock object and RadZone as denoted in picture below. How to remove these space.
    View picture at: http://sonlh.110mb.com/storage/image/dockborder.jpg
  2. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 26 Jun 2008 Link to this post

    Remove padding from the CSS files related to RadDockZone and use the skins from the skin directory.
    1)  C:\Program Files\Telerik\RadControls for ASPNET AJAX Q1 2008\Skins\Dock.Default.css
    *>.RadDockZone_Default.rdVertical

    {
    padding-right:5px;  /remove this line
    }

    .RadDockZone_Default

    {
    border: 1px solid #b8b8b8;
    padding: 5px 0 0 5px;  /remove this line
    background-color: #f7f7f7;
    }
    2) C:\Program Files\Telerik\RadControls for ASPNET AJAX Q1 2008\Skins\Dock.css
    .raddockzone
    {
    padding: 4px !important; /remove this line
    }

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ly Hung
    Ly Hung avatar
    8 posts
    Member since:
    Nov 2007

    Posted 06 Jul 2008 Link to this post

    thanks for your answer Obi. But that's not working answer. I created custom skin named MCWFDockSkin. I've used the following style and it's work. Thanks anyway.
    /* Docking Zone properties */ 
     
    .RadDockZone_MCWFDockSkin 
    {        
        padding: -4px -4px -4px -4px; 
        margin: -4px -4px -4px -4px;     
     
    *>.RadDockZone_MCWFDockSkin.rdVertical /* hidden from IE6 */ 
        padding: 0px 0px 0px 0px;     
     
    /* Dock Object properties */ 
     
    /* wrappers and borders */ 
     
    .RadDockZone_MCWFDockSkin .rdPlaceHolder 
        border-color:#ffffff; 
        padding: 0px 0px 0px 0px; 
        border: 0px; 
        margin: 0px 0px 0px 0px;     
     
    .RadDock_MCWFDockSkin 
        margin:0px 0px 0px 0px; 
        background:#ffffff; 
        color:#ffffff; 
        font-family:'ms sans serif',sans-serif; 
        text-align:left; 
        padding:0px 0px 0px 0px; 
     
    .RadDock_MCWFDockSkin .rdTopBorder, 
    .RadDock_MCWFDockSkin .rdSideBorders, 
    .RadDock_MCWFDockSkin .rdBottomBorder 
        border-width:0px; 
        border-color:#ffffff; 
    .RadDock_MCWFDockSkin .rdSideBorders 
        border-style:none none none; 
        overflow:visible; 
    .RadDock_MCWFDockSkin .rdTopBorder 
        border-style:none none none; 
    .RadDock_MCWFDockSkin .rdBottomBorder 
        border-style:none none none; 
     

  5. LeBear
    LeBear avatar
    233 posts
    Member since:
    May 2006

    Posted 29 Jul 2008 Link to this post

    This page (http://www.telerik.com/help/aspnet-ajax/dock_appearancecss.html) is an excellent resource for designing skins.

    In there, I learned that the class for the dock zone is "raddockzone RadDockZone_Default rdVertical".  The first class to be referenced is the base class for the dockzone from Telerik.  When you look at the corresponding file in the Telerik installation files, the very last thing in that file is:

    .raddockzone
    {
      padding: 4px !important;
    }

    This explains the 4 pixels between the dock zone and the dock object.

    I'm curious to know, Telerik, why this is there. 

  6. Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 30 Jul 2008 Link to this post

    Hi Barry,

    Thank you for the kind words about the help article.
    By design the RadDockZone has some padding set greater than 0. In the latest versions of RadDock for ASP.NET AJAX we decided to change the padding set to the RadDock zone to be divisible by 2 as it is more convenient when doing  javascript calculations. What is more, in the previous version of the RadDock for ASP.NET AJAX the RadDocks had right and bottom margins set and the RadDockZone had top and left paddings set. However, the margins set to the RadDocks caused unneeded scrollbars appearing in some cases in the RadDockZone. That is why, we set the margins of the RadDocks to 0 px and the paddings of the RadDockZone to 4px at all sides.
    If you need to set another padding to a zone with id RadDockZone1 - 2px, for example, you can add the following style between the head tags of the page:
    <style type="text/css">  
    #RadDockZone1 {     
        padding:2px !important;     
    }    
    </style> 
    or set the RadDockZone's padding with javascript.

    Let us know if you need further assistance.

    Best regards,
    Sophy
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. Answer
    LeBear
    LeBear avatar
    233 posts
    Member since:
    May 2006

    Posted 30 Jul 2008 Link to this post

    Yes, the new documentation on skinning is awesome.  I've found all of the articles and training on creating a skin from another, but none of them went into the details of explaining the CSS classes.  I finally stumbled upon this new documentation (I assume it's new), and I just LOVE it!  Thank you!

    And thanks for this explanation.  Actually, I was just playing around with skinning by starting with an empty CSS file and building it up piece by piece.  I found the padding, but couldn't manipulate it directly.  I understand the needs to avoid the scroll bars having read the other posts and even experiencing it in the past.

    I appreciate the information should I need it.

    Thank you for your great support!

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