Internal build checkbox issue on Chrome

9 posts, 1 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 02 Jul 2012 Link to this post

    Hi,

    Using the latest internal build (June 26th I think), I get the checkbox looking too big in Chrome.  It doesn't skin properly and also the box is oversized....  Simple to replicate...  It looks fine in IE9.

    Regards,

    Jon

    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="uxRadScriptManager" runat="server"></telerik:RadScriptManager>
        <telerik:RadStyleSheetManager ID="uxRadStyleSheetManager" Runat="server"></telerik:RadStyleSheetManager>
        <asp:CheckBox ID="uxRememberMe" runat="server" Text="Remember Me"></asp:CheckBox>       
        <telerik:RadFormDecorator ID="uxRadFormDecorator" Runat="server" DecoratedControls="CheckBoxes, Buttons, Scrollbars, Label,Textbox" />
    </form>
  2. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 02 Jul 2012 Link to this post

    Further to this I just noticed that I'm now on v20 of Chrome not v19 so don't know if this might have broken something...
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 02 Jul 2012 Link to this post

    Hi,

    I have tested your scenario and I confirm the issue. We have tested with an older chrome version - v12 - and the issue does not exist.

    Also, I have tested with the other webkit browser - Safari - and the issue does not exist.

    As the skinning for radio buttons and checkboxes in Chorme and Safari is applied directly to the input HTML element, I have tried to override the background image to check if it will work - well, it works in Safari and not in Chrome.

    For now we will consider it for a Chrome bug and we will wait for the next browser version to see if it will be fixed. If the issue is still reproducible in the next Chrome version, we will try to find a workaround.

    Bellow is my test code:

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
        .rfdCheckbox input[type="checkbox"]
        {
            background-image: url(http://motivaciabg.com/images/checkbox.jpg) !important;
        }
        </style>
    </head>
    <body style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px;
        padding-top: 0px;">
        <form id="Telerik" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadStyleSheetManager ID="uxRadStyleSheetManager" Runat="server"></telerik:RadStyleSheetManager>
        <asp:CheckBox ID="uxRememberMe" runat="server" Text="Remember Me"></asp:CheckBox>      
        <telerik:RadFormDecorator ID="uxRadFormDecorator" Runat="server" DecoratedControls="CheckBoxes, Buttons, Scrollbars, Label,Textbox" />
        </form>
    </body>
    </html>


    Kind regards,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  5. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 02 Jul 2012 Link to this post

    Hi Bozhidar

    Thanks for that but sadly that doesn't fix.  I've just looked at the css details in chrome and there is a 20px height and width being set (as per attached screenshot), disabling them seems to get rid of the oversize issue...

    Cheers,

    Jon
  6. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 02 Jul 2012 Link to this post

    Hello,

    It does not fix the issue, but on my side, the checkbox is not bigger and only it is not decorated. I only mentioned that this seems is a Chrome issue and not Telerik`s. In the same time, Safari does not have problems with the decorated radios and check boxes. I would recommend to skip checkbox decoration using ControlsToSkip property, until a proper solution is found. This will stop the decoration, but at least your checkboxes will not look broken.

    Regards,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  7. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 02 Jul 2012 Link to this post

    I'll leave the issue there for a few days in case Chrome gets sorted - I'll schedule in some time on it later in the week.

    I think that the best option on these maybe to replace with a RadButton styled as a checkbox.  Then I know that it will always work!

    Cheers,

    Jon
  8. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 03 Jul 2012 Link to this post

    Hi,

    Yes, RadButton checkbox is an option, but I hope in shortly the issue will be fixed, from Chrome side or ours.

    All the best,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  9. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 04 Jul 2012 Link to this post

    Hello,

    We succeeded to fix the issue, and the fix will be enviable in the next official release - Q2 Service Pack 1, scheduled for the end of July:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
        .rfdRadio input[type="radio"],
        .rfdCheckbox input[type="checkbox"] {
            -webkit-appearance: none;
        }
        </style>
    </head>
    <body style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px;
        padding-top: 0px;">
        <form id="Telerik" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All"
            EnableRoundedCorners="true" Skin="Office2010Black" />
        <asp:CheckBox ID="chb1" runat="server" Text="Google Chrome" />
        <asp:RadioButton ID="rb1" runat="server" Text="Google Chrome" />
        </form>
    </body>
    </html>


    Regards,
    Bozhidar
    the Telerik team
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  10. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 04 Jul 2012 Link to this post

    Many thanks for that swift fix!

    I'll have to remember to take out the fix next month after the new version is out!

    Regards,

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