FYI: I am using version Q2 2011.
Here is the situation: I am using the FormDecorator control to style my radio buttons and checkboxes. These look great in the latest versions of Firefox, IE, Chrome and Safari (Windows and Mac).
However, with the ipad and iPhone, these controls show an odd border. I've attached a picture for your viewing pleasure. I'm not sure that "border" is even the right word. It is very odd looking.
I thought it might be my skin, but it appears even with a test project where I just created a radiobuttonlist, add the form decorator control and set the skin to Default.
To see this in action on your iphone/ipad, you can look here.
Here is the situation: I am using the FormDecorator control to style my radio buttons and checkboxes. These look great in the latest versions of Firefox, IE, Chrome and Safari (Windows and Mac).
However, with the ipad and iPhone, these controls show an odd border. I've attached a picture for your viewing pleasure. I'm not sure that "border" is even the right word. It is very odd looking.
I thought it might be my skin, but it appears even with a test project where I just created a radiobuttonlist, add the form decorator control and set the skin to Default.
To see this in action on your iphone/ipad, you can look here.
8 Answers, 1 is accepted
0
Hi,
I have tested it with two different iPad emulators, but I could not reproduce the problem. Would you try the following code to see if it will fix the issue:
It should remove any unwanted border and background color. As I can`t reproduce it, I am trying to apply it to the main wrapping element and to the elements that contains the checkbox itself, if the fix works, you could try to remove one of the CSS selectors to see which one should be the correct. Later I will try to test the sample page with a real iPad device.
Kind regards,
Bojo
the Telerik team
I have tested it with two different iPad emulators, but I could not reproduce the problem. Would you try the following code to see if it will fix the issue:
<!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"> .rbToggleButton, .rbPrimaryIcon.rbToggleCheckbox { border: 0 !important; background-color: !important; } </style></head><body><form id="form1" runat="server" class=""> <asp:ScriptManager ID="sm1" runat="server"> </asp:ScriptManager> <div> <telerik:RadButton ID="rb1" runat="server" ButtonType="ToggleButton" ToggleType="CheckBox" Text="Checkbox"> </telerik:RadButton> </form></body></html>It should remove any unwanted border and background color. As I can`t reproduce it, I am trying to apply it to the main wrapping element and to the elements that contains the checkbox itself, if the fix works, you could try to remove one of the CSS selectors to see which one should be the correct. Later I will try to test the sample page with a real iPad device.
Kind regards,
Bojo
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
alovhaug
Top achievements
Rank 2
Rank 2
answered on 15 Jul 2011, 05:15 PM
Yes, so far this problem seems to only happen with actual devices. I have not been able to replicate it with any simulators, but I have seen the problem with every iphone and ipad device we tried so far (2 ipads and 1 iphone).
Unfortunately, the fix you suggested does not seem to resolve the issue.
Also unfortunately, you cannot access my test server right now, as we are experiencing an internet outage. Grrr.
However, I was able to replicate it on FormDecorator / FIrst Look demo on your site. So it should be an easy thing for you to see with an actual device.
Interestingly, for selected items on the demo, instead of seeing a border the area between the radio button and this odd border is filled in for selected items on both checkboxes and radio buttons.
Unfortunately, the fix you suggested does not seem to resolve the issue.
Also unfortunately, you cannot access my test server right now, as we are experiencing an internet outage. Grrr.
However, I was able to replicate it on FormDecorator / FIrst Look demo on your site. So it should be an easy thing for you to see with an actual device.
Interestingly, for selected items on the demo, instead of seeing a border the area between the radio button and this odd border is filled in for selected items on both checkboxes and radio buttons.
0
Hi,
I have tested a few radios and checkboxes with a real ipad device and I found the reported issue.
For some reason the Safari iPad browsers sets unwanted border and background color to radio buttons and checkboxes. As webkit browsers (Chrome, Safari) support radios and checkboxes styling the redner for those browsers is different than the rendering for the other browsers.
in shortly, you should add a few extra CSS lines in the head section of your document or in an external stylesheet:
This will fix the issue. We will consider to add similar fix to our CSS base stylesheet. If everything is OK, probably the fix will be added to Q2 Service Pack 1, scheduled for the end of the Summer season.
All the best,
Bojo
the Telerik team
I have tested a few radios and checkboxes with a real ipad device and I found the reported issue.
For some reason the Safari iPad browsers sets unwanted border and background color to radio buttons and checkboxes. As webkit browsers (Chrome, Safari) support radios and checkboxes styling the redner for those browsers is different than the rendering for the other browsers.
in shortly, you should add a few extra CSS lines in the head section of your document or in an external stylesheet:
<%@ 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"> input[type=checkbox], input[type=radio], input[type=checkbox][checked], input[type=radio][checked] { border: 0; background-color: transparent; } </style></head><body> <form id="form1" runat="server" class=""> <asp:ScriptManager ID="sm1" runat="server"> </asp:ScriptManager> <telerik:RadFormDecorator ID="rfd1" runat="server" DecoratedControls="All" /> <fieldset> <legend>RadFormDecorator Controls</legend> <asp:CheckBox ID="chb1" runat="server" Text="Checkbox Unchecked" /> <br /> <asp:CheckBox ID="CheckBox1" runat="server" Text="Checkbox Checked" Checked="true" /> <br /> <asp:RadioButton ID="radio3" runat="server" Text="Radio Unchecked" /> <br /> <asp:RadioButton ID="radio4" runat="server" Text="Radio Checked" Checked="true" /> </fieldset> </form></body></html>This will fix the issue. We will consider to add similar fix to our CSS base stylesheet. If everything is OK, probably the fix will be added to Q2 Service Pack 1, scheduled for the end of the Summer season.
All the best,
Bojo
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
alovhaug
Top achievements
Rank 2
Rank 2
answered on 19 Jul 2011, 03:14 PM
Much better! Thank you so much for the fix! Very much appreciated!
0
Fabrizio
Top achievements
Rank 1
Rank 1
answered on 17 Apr 2013, 04:11 PM
I sorta have the same problem; once viewed on the pc a checkbox decoration works finely, while when viewed on the iPad the checkbox gets strangely filled and bordered while on the iPhone the whole pop-up gets screwed up. The whole is at https://www.miafoto.it/iPhone/feedback and I enclose the images for iPad.
0
Hi Fabrizio,
We cannot reproduce any such issues in current iOS devices. Is the version of the controls that you are using the current one? Can you produce the issue on our demos - http://demos.telerik.com/aspnet-ajax/formdecorator/examples/overview/defaultcs.aspx? Furthermore could you, please, open a support ticket and attach a sample runnable project there that reproduces the issue at hand so that we can investigate in details?
Regards,
Niko
the Telerik team
We cannot reproduce any such issues in current iOS devices. Is the version of the controls that you are using the current one? Can you produce the issue on our demos - http://demos.telerik.com/aspnet-ajax/formdecorator/examples/overview/defaultcs.aspx? Furthermore could you, please, open a support ticket and attach a sample runnable project there that reproduces the issue at hand so that we can investigate in details?
Regards,
Niko
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
Fabrizio
Top achievements
Rank 1
Rank 1
answered on 19 Apr 2013, 01:00 PM
Yes, my implementation is at the url I gave you. I had to tweak your solution to accomdate the checkbox and to route the user to a page of mine after registering her email address. You solution does not in fact use a checkbox altogether. I found a solution for the iPhone by directing all calls from that platform on the regular form; the desktop version works fine, while the iPad one presents that filling artifact in the checkbox I seem not to be able to get rid of.
0
Hello Fabrizio,
On the page that you have provided I cannot find any trace of Telerik RadControls. Could you, please, elaborate further on what version of the controls are you using? Also could you, please, provide the setup of the RadFormDecorator control that you have on your page? Finally, your best option would be to open a support ticket and attach a sample runnable project that demonstrates the issue at hand so that we can investigate further.
Greetings,
Niko
the Telerik team
On the page that you have provided I cannot find any trace of Telerik RadControls. Could you, please, elaborate further on what version of the controls are you using? Also could you, please, provide the setup of the RadFormDecorator control that you have on your page? Finally, your best option would be to open a support ticket and attach a sample runnable project that demonstrates the issue at hand so that we can investigate further.
Greetings,
Niko
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.