Remove 4pixel between RadDock and DockZone

[Ly Hung]

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

[Obi-Wan Kenobi]

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
}

[Ly Hung]

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

[LeBear]

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. 

[Sophy]

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.

[LeBear]

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!