This is a migrated thread and some comments may be shown as answers.

Remove 4pixel between RadDock and DockZone

5 Answers 281 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Ly Hung
Top achievements
Rank 1
Ly Hung asked on 25 Jun 2008, 04:01 AM
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

5 Answers, 1 is accepted

Sort by
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 26 Jun 2008, 02:52 PM
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
}

0
Ly Hung
Top achievements
Rank 1
answered on 06 Jul 2008, 12:08 PM
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; 
 

0
LeBear
Top achievements
Rank 1
answered on 29 Jul 2008, 09:48 PM

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. 

0
Sophy
Telerik team
answered on 30 Jul 2008, 06:32 AM
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.
0
Accepted
LeBear
Top achievements
Rank 1
answered on 30 Jul 2008, 08:31 PM

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!

Tags
Dock
Asked by
Ly Hung
Top achievements
Rank 1
Answers by
Obi-Wan Kenobi
Top achievements
Rank 1
Ly Hung
Top achievements
Rank 1
LeBear
Top achievements
Rank 1
Sophy
Telerik team
Share this question
or