Radio button styling on Android stock browser

[Bob]

We are using standard html radio button control <input type="radio".../> and cannot get it to style correctly on the android stock browser.  It looks fine on ipad but just renders as a gray dot on a Samsung Galaxy SII stock android browser so cannot tell which radio button is "checked".  It works okay in Chrome on the Android.  Can you help us with the styling here?

Thx...Bob Baldwin
Trabon Solutions

[Alexander Valchev]

Hi Bob,

Kendo UI Mobile provides automatic platform dependent styling of form elements when they are added to a mobile View. Please check the forms demo.

• http://demos.kendoui.com/mobile/forms/checkboxes.html#/
  
  

Kind regards,
Alexander Valchev
the Telerik team

[Bob]

Thanks Alexander for your response.  Yes we know about this demo but we need to place the radio button outside of a listview widget unlike how the demo shows.  When we do this and render the radio buttons thru Kendo UI Mobile on the stock android browser it looks like the attached screenshot .  When we run Chrome on the Android tablet it renders correctly.  I've attached the screenshot for Chrome as well.

Basically, the android stock browser is not indicating which radio is selected, however, Chrome is.

We need to have Kendo UI Mobile render this correctly on both browsers.

Thanks...Bob Baldwin

[Petyo]

Hello Bob,

Kendo UI Mobile does apply styling to to all input elements within the application element, as this could have adverse effects on third party components. You can look through the Kendo UI Source code available in the commercial bundles, copy the stylesheet definitions from there, and apply them to your project. 

In case you need further assistance with the styling of your application, you may contact our premium services, which specialize in such tasks. 

All the best,
Petyo
the Telerik team

[Bob]

Hi Petyo,

We are not using any third party components other than Kendo UI Mobile and Web(for grid widget only).  

The HTML being rendered incorrectly on the Android tablet stock browser is very simple:
<input type="radio" checked="checked" name="YesNo"/> Yes
<input type="radio" name="YesNo"/> No

Again, this renders correctly on the Android Chrome browser.  Also, we believe this issue is not limited to our specific app as we've created the simple test case above and it still renders incorrectly (just like the previous post screenshot) on the Android tablet stock browser.

We believe this is a browser specific rendering issue and Kendo should research and resolve.

Please let us know if you need anything else to research and resolve.

Thx...Bob Baldwin
Trabon Solutions

[Petyo]

Hi Bob,

I am not sure that I understand your case. Is the radio button styling problem in question caused by Kendo UI Mobile? I tried testing a sample page with two radio buttons in an android device (stock browser), and they look very similar to the screenshots you have provided. 

All the best,
Petyo
the Telerik team

[Bob]

Yes Petyo,  we believe Kendo UI Mobile is causing the radio button styling
problem in the Android stock browser.
 
This is why we sent two screenshots.  One is of the Android stock browser with Kendo
UI Mobile(not rendering correctly).  The other is Chrome browser with Kendo UI Mobile (rendering correctly).

On the Android stock browser, you can't tell what radio button is selected
when rendered under Kendo UI Mobile.  When you render without Kendo UI Mobile,
the radio is rendered correctly but not in Android native app look and feel.
 
Basically, the second screenshot (Chrome on Android) is what we expect to
see when rendered in the stock browser on Android.

Thanks...Bob Baldwin
Trabon Group

[Petyo]

Hi Bob,

I am afraid that I can't reproduce the problem you describe. I toggled the mobile application initialization in the follwing jsbin, which produced the results visible in the two screenshots (the radio buttons look pretty much like the ones on your screenshot, green highlight marking the selected radio button). From what I see, Kendo UI Mobile does not (and should not) affect the look of the radio buttons. Do I miss something?

Regards,
Petyo
the Telerik team