Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Radio buttons are partially (half) visible behind the labels #5740

Closed
adam-ah opened this issue Mar 7, 2013 · 6 comments
Closed

Radio buttons are partially (half) visible behind the labels #5740

adam-ah opened this issue Mar 7, 2013 · 6 comments

Comments

@adam-ah
Copy link

adam-ah commented Mar 7, 2013

This is the code I use:

<ul data-role="listview" data-inset="true">
    <li>
        <h3>{$text}</h3>
        <div>
            <fieldset data-role="controlgroup" data-type="horizontal">
                <input id="{$id}-no" name="{$id}-group" value="No" type="radio">
                <label for="{$id}-no">No</label>
                <input id="{$id}-yes" name="{$id}-group" value="Yes" type="radio">
                <label for="{$id}-yes">Yes</label>
            </fieldset>
        </div>
    </li>
</ul>

The physical radio buttons are half visible behind the label covers.

Android 2.3.3, default browser.
Desktop Chrome is all okay.
Photo on 7-03-13 at 7 01 PM

@jaspermdegroot
Copy link
Contributor

@Adam-Ho

Did you test with latest code? I couldn't reproduce the issue on Android 2.3 http://jsbin.com/atarer/2

@adam-ah
Copy link
Author

adam-ah commented Mar 7, 2013

I've downloaded the jquery.mobile-1.3.0.zip package and using the uncompressed JS and uncompressed CSS.
Hitting the above test link with the mobile seems to be good, no issues.
If cannot reproduce using the zip, I'll try to narrow down the problem to see which components together cause the issue.
(btw, I'm adding the controls dynamically and calling .trigger('create') but that should not matter much. On a desktop browser the page looks perfect).

@jaspermdegroot
Copy link
Contributor

@Adam-Ho

It could be that this was an issue in 1.3 stable, but has been fixed already in latest code (which means it will be fixed in 1.3.1). See links in the head of the JS Bin test page (http://jsbin.com/atarer/2/edit) to test your app with latest code.
Did you wrap the radio buttons in a <form> in your app? If not, you could check if that prevents the issue when using 1.3.0.
I am closing this issue as cannot reproduce / already fixed. If you still see an issue when you test your app with latest, please provide a JS Bin test page that shows the problem and we re-open.

@adam-ah
Copy link
Author

adam-ah commented Mar 7, 2013

I think I've managed to isolate the problem, added the 'demo' to http://jsbin.com/atarer/3/edit
The mini display in not correct, the normal is all okay.

@jaspermdegroot jaspermdegroot reopened this Mar 7, 2013
@mrextreme
Copy link

I also see it with stock Android 2.3.4 browser on SE xPeria Arc, and stock browser in Android 2.3.7 (CM 7.2) on Samsung Galaxy Ace. I also see the right edge of the underlying rightmost radio button with stock Android 4.0.4 browser on SE xPeria Arc S. It looks ok with stock Android 4.0.4 browser on Samsung Galaxy Note (GT-N7000).

@jaspermdegroot
Copy link
Contributor

I was able to reproduce the issue (Android 2.3.5). I wonder if it's the same as #5728

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants