Just updated to the latest version today and noticed buttons aren't skinning correctly when inside a raddock inside a raddockzone (I'm using custom skins). See attached images.
Fixed by adding this style to my page with docks on the page:
Fixed by adding this style to my page with docks on the page:
.RadDockZone, .RadDockZone * {box-sizing: border-box !important;-moz-box-sizing: border-box !important;}5 Answers, 1 is accepted
0
bemana
Top achievements
Rank 1
Rank 1
answered on 14 Nov 2013, 08:15 PM
The
.RadDockZone, .RadDockZone * styles are also causing display issues with the content in my docks. Hopefully forcing it back to border-box won't cause a problem with the docks.0
Hello,
Thanks for contacting us. Possible issues could related to a fix in the CSS files that should allow to use bootstrap styles without causing some problems tot he Telerik Controls.
At Lee: I have tested a scenario similar to your but could not see a problem:
At Brandon: Could you provide us a sample code to test in what scenarios you are facing some issues?
Regards,
Bozhidar
Telerik
Thanks for contacting us. Possible issues could related to a fix in the CSS files that should allow to use bootstrap styles without causing some problems tot he Telerik Controls.
At Lee: I have tested a scenario similar to your but could not see a problem:
<form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadDockZone ID="rdz1" runat="server" Skin="Default" Width="500"> <telerik:RadDock ID="rd1" runat="server" Visible="True" Width="400" Height="300" Top="100" Left="20" Title="Dock Title" Skin="Default" EnableRoundedCorners="true"> <ContentTemplate> <div style="width: 30px; height: 30px; background: red; padding: 5px;"> </div> <telerik:RadButton runat="server" text="Button"> </telerik:RadButton> <asp:Button runat="server" Text="ASP Button" /> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </form>At Brandon: Could you provide us a sample code to test in what scenarios you are facing some issues?
Regards,
Bozhidar
Telerik
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 the blog feed now.
0
Cradz
Top achievements
Rank 1
Rank 1
answered on 18 Nov 2013, 04:49 PM
Hi Bozhidar,
Are you using a custom skin?
Are you using a custom skin?
0
Accepted
Hi,
I am using both custom and embedded skin. I found a small glitch with button nested inside Dock, this is caused by the style you mentioned, and it should be reworked not ot use RadDockZone * {...}.
The issue is caused by some CSS improvements that will allow using Bootsrap styles and Telerik controls on the same page. In some controls it is good to remove the default Bootstrap value box-sizsing: border-box for all nested elements. However for the Dock zone it should be removed for the DockZone element only.
The fix will be available with the next official release as also with the internal builds.
For the bug report your Telerik points have been updated.
I would advise to use the following CSS fix, and it is good to be applied to the DockZone element directly in case you are using Bootstrap:
It is almost the same, but removes .RadDockZone element from the CSS grouping:
Regards,
Bozhidar
Telerik
I am using both custom and embedded skin. I found a small glitch with button nested inside Dock, this is caused by the style you mentioned, and it should be reworked not ot use RadDockZone * {...}.
The issue is caused by some CSS improvements that will allow using Bootsrap styles and Telerik controls on the same page. In some controls it is good to remove the default Bootstrap value box-sizsing: border-box for all nested elements. However for the Dock zone it should be removed for the DockZone element only.
The fix will be available with the next official release as also with the internal builds.
For the bug report your Telerik points have been updated.
I would advise to use the following CSS fix, and it is good to be applied to the DockZone element directly in case you are using Bootstrap:
<style type="text/css">.RadDockZone * { box-sizing: border-box !important; -moz-box-sizing: border-box !important; } </style>It is almost the same, but removes .RadDockZone element from the CSS grouping:
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> .RadDockZone * { box-sizing: border-box !important; -moz-box-sizing: border-box !important; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadButton ID="RadButton3" runat="server" Text="Button" Skin="Sunset"> </telerik:RadButton> <br /> <br /> <telerik:RadDockZone ID="rdz1" runat="server" Skin="Default" Width="500"> <telerik:RadDock ID="rd1" runat="server" Visible="True" Width="400" Height="300" Top="100" Left="20" Title="Dock Title" Skin="Default" EnableRoundedCorners="true"> <ContentTemplate> </telerik:RadButton> <telerik:RadButton ID="RadButton2" runat="server" Text="Button" Skin="Sunset"> </telerik:RadButton> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </form></body></html>Regards,
Bozhidar
Telerik
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 the blog feed now.
0
Cradz
Top achievements
Rank 1
Rank 1
answered on 19 Nov 2013, 04:46 PM
Thanks Bozhidar.