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

Button inside RadDock background issue with v.2013.3.1114.40

5 Answers 76 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Cradz
Top achievements
Rank 1
Cradz asked on 14 Nov 2013, 06:49 PM
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:

.RadDockZone, .RadDockZone * {
box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
}

5 Answers, 1 is accepted

Sort by
0
bemana
Top achievements
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
Bozhidar
Telerik team
answered on 18 Nov 2013, 03:19 PM
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:

<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
answered on 18 Nov 2013, 04:49 PM
Hi Bozhidar,

Are you using a custom skin?


0
Accepted
Bozhidar
Telerik team
answered on 19 Nov 2013, 08:25 AM
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:

<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:

<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
answered on 19 Nov 2013, 04:46 PM
Thanks Bozhidar.
Tags
Dock
Asked by
Cradz
Top achievements
Rank 1
Answers by
bemana
Top achievements
Rank 1
Bozhidar
Telerik team
Cradz
Top achievements
Rank 1
Share this question
or