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
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
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
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:
Kind regards,
Bozhidar
the Telerik team
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">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
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
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
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
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
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
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
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
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:
Regards,
Bozhidar
the Telerik team
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">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
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
I'll have to remember to take out the fix next month after the new version is out!
Regards,
Jon