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

Internal build checkbox issue on Chrome

8 Answers 131 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 02 Jul 2012, 08:20 AM
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>

8 Answers, 1 is accepted

Sort by
0
Jon
Top achievements
Rank 1
answered on 02 Jul 2012, 09:07 AM
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...
0
Bozhidar
Telerik team
answered on 02 Jul 2012, 12:49 PM
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.
0
Jon
Top achievements
Rank 1
answered on 02 Jul 2012, 01:03 PM
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
0
Bozhidar
Telerik team
answered on 02 Jul 2012, 01:46 PM
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.
0
Jon
Top achievements
Rank 1
answered on 02 Jul 2012, 03:18 PM
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
0
Bozhidar
Telerik team
answered on 03 Jul 2012, 06:36 AM
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.
0
Accepted
Bozhidar
Telerik team
answered on 04 Jul 2012, 06:58 AM
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.
0
Jon
Top achievements
Rank 1
answered on 04 Jul 2012, 01:53 PM
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
Tags
FormDecorator
Asked by
Jon
Top achievements
Rank 1
Answers by
Jon
Top achievements
Rank 1
Bozhidar
Telerik team
Share this question
or