Button inside RadDock background issue with v.2013.3.1114.40

6 posts, 1 answers
  1. Cradz
    Cradz avatar
    65 posts
    Member since:
    Nov 2005

    Posted 14 Nov 2013 Link to this post

    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;
    }

  2. bemana
    bemana avatar
    14 posts
    Member since:
    Dec 2006

    Posted 14 Nov 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 18 Nov 2013 Link to this post

    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.
  5. Cradz
    Cradz avatar
    65 posts
    Member since:
    Nov 2005

    Posted 18 Nov 2013 Link to this post

    Hi Bozhidar,

    Are you using a custom skin?


  6. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 19 Nov 2013 Link to this post

    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.
  7. Cradz
    Cradz avatar
    65 posts
    Member since:
    Nov 2005

    Posted 19 Nov 2013 Link to this post

    Thanks Bozhidar.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017