Hi All,
So am I missing a trick somewhere.
At the moment the main skin that I use is Office2010Blue. When using RadDock the background is mediumish blue but I want it to be white. I can change the content cell css to white but the surrounding cells stay as blue. I can understand this when using rounded corners as the image padding is needed but when not using rounded corners there is no need to provide the image.
Is there a work around for this?
Regards,
Jon
So am I missing a trick somewhere.
At the moment the main skin that I use is Office2010Blue. When using RadDock the background is mediumish blue but I want it to be white. I can change the content cell css to white but the surrounding cells stay as blue. I can understand this when using rounded corners as the image padding is needed but when not using rounded corners there is no need to provide the image.
Is there a work around for this?
Regards,
Jon
11 Answers, 1 is accepted
0
Hello,
You can find information how to customize the appearance of RadDock in the following articles:
Controlling Appearance,
Skins,
Tutorial: Creating a Custom Skin,
RadDock's HTML Rendering and CSS
and
CSS Skin File Selectors.
Kind regards,
Rumen
the Telerik team
You can find information how to customize the appearance of RadDock in the following articles:
Controlling Appearance,
Skins,
Tutorial: Creating a Custom Skin,
RadDock's HTML Rendering and CSS
and
CSS Skin File Selectors.
Kind regards,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Jon
Top achievements
Rank 1
Rank 1
answered on 10 Jan 2012, 11:39 AM
Hi Rumen,
Thanks for that. I had actually already seen these and realised that waht I need to do goes beyond their scope a little.
I want to have a CSS based way of overriding the images that are used in the skin for the edges on the sides and bottom of the panel. I want to have the panel's background changed to a colour of my choosing then have the left bottom and right borders pickup the skin color.
I don't want this to be for rounded panels - which I appreciate require the use of images.
Regards,
Jon
Thanks for that. I had actually already seen these and realised that waht I need to do goes beyond their scope a little.
I want to have a CSS based way of overriding the images that are used in the skin for the edges on the sides and bottom of the panel. I want to have the panel's background changed to a colour of my choosing then have the left bottom and right borders pickup the skin color.
I don't want this to be for rounded panels - which I appreciate require the use of images.
Regards,
Jon
0
Accepted
Hi Jon,
You can modify the background and the borders of the RadDock controls by changing its default CSS styles. In the attached sample page I have demonstrated a possible approach. Please use it as a reference for incorporating the desired appearance into your actual project.
All the best,
Slav
the Telerik team
You can modify the background and the borders of the RadDock controls by changing its default CSS styles. In the attached sample page I have demonstrated a possible approach. Please use it as a reference for incorporating the desired appearance into your actual project.
All the best,
Slav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Jon
Top achievements
Rank 1
Rank 1
answered on 01 Feb 2012, 09:32 PM
Many thanks Slav, that did the trick. I had to muck around with the padding a little - hiding the cells removed the padding but it just needed putting back into the centre column.
Best Regards,
Jon
Best Regards,
Jon
0
Jon
Top achievements
Rank 1
Rank 1
answered on 02 Feb 2012, 10:56 AM
Hi Slav,
I've noticed a new issue with this, for some reason on some pages the contenttemplate contents disappear below is a sample page that does this, removing the css that does the display:none resolves this but obviously then displays the sides to the raddock panel. It's almost as if the contenttemplate content is in the wrong page.
Any thoughts?
Regards,
Jon
I've noticed a new issue with this, for some reason on some pages the contenttemplate contents disappear below is a sample page that does this, removing the css that does the display:none resolves this but obviously then displays the sides to the raddock panel. It's almost as if the contenttemplate content is in the wrong page.
Any thoughts?
Regards,
Jon
<head runat="server"> <title></title> <style type="text/css"> /* CSS for RadDock custom background colour - have to remove the surround which uses images for the borders and use css borders instead */ /* this will remove the unwanted cells */ .rdTop .rdLeft, .rdTop .rdRight, .rdMiddle .rdLeft, .rdMiddle .rdRight, .rdBottom { display: none; } /* put the necessary border as the image border from the sprite was removed when the left and right cells were disabled */ .rdTop .rdCenter, .rdMiddle .rdCenter { padding-left:8px !important; padding-right:8px !important; border-left: 1px solid #9eb6ce !important; border-right: 1px solid #9eb6ce !important; background-color: white !important; } .rdMiddle .rdCenter { border-bottom: 1px solid #9eb6ce !important; padding-top:2px !important; padding-bottom:5px !important; } /* Setting custom background colour to Dock content */ .RadDock table.rdTable tr.rdMiddle td.rdCenter .rdContent { background-color: white !important; }/* END OF CSS for RadDock custom background colour */ </style></head><body> <form id="form1" runat="server"> <telerik:RadStyleSheetManager ID="pgRadStyleSheetManager" runat="server"></telerik:RadStyleSheetManager> <telerik:RadScriptManager ID="pgRadScriptManager" runat="server"></telerik:RadScriptManager> <telerik:RadDock ID="uxRadDockSecurityProblem" runat="server" Height="65px" Top="100px" Width="400px" EnableRoundedCorners="false" Pinned="true" Title="j" EnableAnimation="false" AutoPostBack="false" Resizable="false" DefaultCommands="None" EnableDrag="False" Tag=""> <ContentTemplate> sddd </ContentTemplate> </telerik:RadDock> </form></body></html>0
Hello Jon,
I tested your code sample for the described behavior, but I wasn't able to reproduce the issue. Please ensure that the provided snippet indeed isolates the problem. I have attached a screen capture so that you can verify that I haven't missed something.
Note that the proper way to create new appearance for the dock control is to use the guidelines in the help article Tutorial: Creating a Custom Skin in order to create a new skin. If you need to modify the look of RadDock further, you are free to do so, but keep in mind that such customizations are not supported and may lead to an unexpected behavior.
In case you continue experience problems, please open a support ticket and send a sample demo which reproduces the issue and which is fully runnable and does not need any modifications to be done in order to be ran. Once I receive it, I will help you get the desired behavior, if possible.
Kind regards,
Slav
the Telerik team
I tested your code sample for the described behavior, but I wasn't able to reproduce the issue. Please ensure that the provided snippet indeed isolates the problem. I have attached a screen capture so that you can verify that I haven't missed something.
Note that the proper way to create new appearance for the dock control is to use the guidelines in the help article Tutorial: Creating a Custom Skin in order to create a new skin. If you need to modify the look of RadDock further, you are free to do so, but keep in mind that such customizations are not supported and may lead to an unexpected behavior.
In case you continue experience problems, please open a support ticket and send a sample demo which reproduces the issue and which is fully runnable and does not need any modifications to be done in order to be ran. Once I receive it, I will help you get the desired behavior, if possible.
Kind regards,
Slav
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Jon
Top achievements
Rank 1
Rank 1
answered on 06 Feb 2012, 05:04 PM
Hi Slav,
That's odd however I just tried in Chrome and it works like in your screen shot. The bug seems to be happening in IE8 - looking at your screenshot it looks like you are on IE9 - is that right?
Yeah using a new skin would be problematic as I want the colour to change for all skins and the skin to be a standard... Thus a custom skin would only open up more work etc....
Regards,
Jon
That's odd however I just tried in Chrome and it works like in your screen shot. The bug seems to be happening in IE8 - looking at your screenshot it looks like you are on IE9 - is that right?
Yeah using a new skin would be problematic as I want the colour to change for all skins and the skin to be a standard... Thus a custom skin would only open up more work etc....
Regards,
Jon
0
Jon
Top achievements
Rank 1
Rank 1
answered on 08 Feb 2012, 01:22 PM
Hi again Slav,
I've just tried this in a new empty website and the same thing happens on IE8, I've also cleared the cache and the problem is still there. It doesn't appear when using Chrome.
Fingers crossed the fact that it is a browser issue will allow a work around to be done.
Regards,
Jon
I've just tried this in a new empty website and the same thing happens on IE8, I've also cleared the cache and the problem is still there. It doesn't appear when using Chrome.
Fingers crossed the fact that it is a browser issue will allow a work around to be done.
Regards,
Jon
0
Hello Jon,
Indeed, the content is not displayed under Internet Explorer 8. It appears that the height of the RadDock's content container is not calculated correctly when the rendered border cells of the control are removed via CSS and the page is viewed under the mentioned browser. To alter this effect, please add the following handler of the RadDock OnClientInitialize event in order to set the correct height of the container element for your custom scenario:
Regards,
Slav
the Telerik team
Indeed, the content is not displayed under Internet Explorer 8. It appears that the height of the RadDock's content container is not calculated correctly when the rendered border cells of the control are removed via CSS and the page is viewed under the mentioned browser. To alter this effect, please add the following handler of the RadDock OnClientInitialize event in order to set the correct height of the container element for your custom scenario:
<telerik:RadDock ID="uxRadDockSecurityProblem" runat="server" Height="65px" Top="100px" Width="400px" EnableRoundedCorners="false" Pinned="true" Title="j" EnableAnimation="false" AutoPostBack="false" Resizable="false" DefaultCommands="None" EnableDrag="False" Tag="" OnClientInitialize="OnClientInitialize"> <ContentTemplate> sddd </ContentTemplate></telerik:RadDock><script type="text/javascript"> function OnClientInitialize(sender, args) { if ($telerik.isIE8) { var dockHeight = $telerik.getBounds(sender.get_element()).height; var titlebarHeight = $telerik.getBounds(sender.get_titleBar()).height; sender.get_contentContainer().style.height = dockHeight - titlebarHeight; } }</script>Regards,
Slav
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Jon
Top achievements
Rank 1
Rank 1
answered on 09 Feb 2012, 01:09 PM
Hi Slav,
Many thanks - works great!
Will that go in as a bug fix or will I need to keep it in as a patch? i like to have as few as possible work arounds in the code...
Regards,
Jon
Many thanks - works great!
Will that go in as a bug fix or will I need to keep it in as a patch? i like to have as few as possible work arounds in the code...
Regards,
Jon
0
Hello Jon,
I am very happy that the problem is successfully resolved!
Note that this fix is required, because some custom modifications have been applied to the RadDock control. Such changes are out of the scope of our support system and resolving any bugs that are caused by them is developer's responsibility. As the bug that you have encountered is specific only to your custom setup, it doesn't need to be fixed in the default RadButton control.
Feel free to contact us again if you run into more difficulties.
All the best,
Slav
the Telerik team
I am very happy that the problem is successfully resolved!
Note that this fix is required, because some custom modifications have been applied to the RadDock control. Such changes are out of the scope of our support system and resolving any bugs that are caused by them is developer's responsibility. As the bug that you have encountered is specific only to your custom setup, it doesn't need to be fixed in the default RadButton control.
Feel free to contact us again if you run into more difficulties.
All the best,
Slav
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>