In all of the examples I've seen on the telerik website for RadDock, the raddocks fit perfectly together with no spacing in between them. How can I specify some spacing in between the raddocks (e.g. a 5 pixel space in between DockA and DockB in a vertical docking zone) so that they do not fit together like puzzle pieces?
The only way I can figure out to do this is to use more than one RadDockZone within table cells that themselves control the spacing, which is not an ideal solution.
I can modify the CSS if necessary and disable the embedded skins, however I have not figured out how to do it without messing up the layout.
Thanks,
joe
The only way I can figure out to do this is to use more than one RadDockZone within table cells that themselves control the spacing, which is not an ideal solution.
I can modify the CSS if necessary and disable the embedded skins, however I have not figured out how to do it without messing up the layout.
Thanks,
joe
5 Answers, 1 is accepted
0
Hi Joseph,
You can easily set spacing between the different RadDocks by using the CSS margin property. Consider and play with the values of the following CSS:
.raddock
{
margin: 10px 20px 30px 40px !important;
}
The values go clockwise - 10px means "margin-top", 20px means "margin-right", 30px means "margin-bottom" and 40px means "margin-left". You may also use the margin properties separately, but this will boost your CSS:
.raddock
{
margin-top: 10px !important;
margin-right: 20px !important;
margin-bottom: 30px !important;
margin-left: 40px !important;
}
Please, make sure you dont't forget the !important flag after each value, otherwise your custom setting may not be applied.
Regards,
Martin Ivanov
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
You can easily set spacing between the different RadDocks by using the CSS margin property. Consider and play with the values of the following CSS:
.raddock
{
margin: 10px 20px 30px 40px !important;
}
The values go clockwise - 10px means "margin-top", 20px means "margin-right", 30px means "margin-bottom" and 40px means "margin-left". You may also use the margin properties separately, but this will boost your CSS:
.raddock
{
margin-top: 10px !important;
margin-right: 20px !important;
margin-bottom: 30px !important;
margin-left: 40px !important;
}
Please, make sure you dont't forget the !important flag after each value, otherwise your custom setting may not be applied.
Regards,
Martin Ivanov
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Joseph
Top achievements
Rank 1
Rank 1
answered on 27 Oct 2008, 06:08 PM
Telerik, I am having a hard time getting that example to work. Do I need to turn off enableembedded scripts and modify the Dock.skinname.css file directly in order to get this to work? Or can I simply register the .raddock property anywhere in my source and have it work?
Or do I need to specify the CssClass property of the raddock itself and set it to "raddock" with the example you gave me there defined on the page, before it will work?
Or perhaps can you provide me with a working sample if my steps above are not correct?
For instance, for Inox I have tried turning off embedded skins, pasting the inox folder into my localhost, defining a stylesheet link to the Dock.inox.css file. Then I added .raddock to the CSS File, but that did not work. Then I tried editing .RadDock_Inox and adding margin in there, but that did seem to make any difference. Please help set me on the right path.
thx,
joseph
Or do I need to specify the CssClass property of the raddock itself and set it to "raddock" with the example you gave me there defined on the page, before it will work?
Or perhaps can you provide me with a working sample if my steps above are not correct?
For instance, for Inox I have tried turning off embedded skins, pasting the inox folder into my localhost, defining a stylesheet link to the Dock.inox.css file. Then I added .raddock to the CSS File, but that did not work. Then I tried editing .RadDock_Inox and adding margin in there, but that did seem to make any difference. Please help set me on the right path.
thx,
joseph
0
Hello Joseph,
The CSS rule I gave you yesterday should be put in <style>...</style> tags in the <head>...</head> section of your webpage, or included in your external .css files. You don't need to modify the skins. Here is an example hpw to do this. Add the following in the <head>...</head> of your webpage:
<style type="text/css">
.raddock
{
margin: 10px 20px 30px 40px !important;
}
</style>
or the following in your external stylesheet:
.raddock
{
margin: 10px 20px 30px 40px !important;
}
I recommend to use the second approach, as if you make further changes you will not need to go to all the pages, but will edit the values only once - in your external styles.
If you still experience hard time to put this to work, please, open a new support ticket and include a small running project with your layout and RadDocks, as well as the exact spacing you need to have between the docks.
Thanks,
Martin Ivanov
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
The CSS rule I gave you yesterday should be put in <style>...</style> tags in the <head>...</head> section of your webpage, or included in your external .css files. You don't need to modify the skins. Here is an example hpw to do this. Add the following in the <head>...</head> of your webpage:
<style type="text/css">
.raddock
{
margin: 10px 20px 30px 40px !important;
}
</style>
or the following in your external stylesheet:
.raddock
{
margin: 10px 20px 30px 40px !important;
}
I recommend to use the second approach, as if you make further changes you will not need to go to all the pages, but will edit the values only once - in your external styles.
If you still experience hard time to put this to work, please, open a new support ticket and include a small running project with your layout and RadDocks, as well as the exact spacing you need to have between the docks.
Thanks,
Martin Ivanov
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Joseph
Top achievements
Rank 1
Rank 1
answered on 31 Oct 2008, 07:18 PM
'rik the problem was my main project was not on the latest version of raddock. It looks like the ability to space apart the docks must be a recent feature, as the 2008.2.726 assembly version did not recognize my stylesheet.
However, the 2008.2.1001 feature did, and installing this version (the latest) fixed it. I discovered it was a version issue when I did an html compare between one that worked and one that didn't, and found the difference was in your version string in the html source.
thx,
joe
However, the 2008.2.1001 feature did, and installing this version (the latest) fixed it. I discovered it was a version issue when I did an html compare between one that worked and one that didn't, and found the difference was in your version string in the html source.
thx,
joe
0
Hi Joseph,
We are glad that the problem is fixed. Please, do not hesitate to get back to us if you experience problems or need further assistance.
Thanks,
Martin Ivanov
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
We are glad that the problem is fixed. Please, do not hesitate to get back to us if you experience problems or need further assistance.
Thanks,
Martin Ivanov
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.