CODEWITHSUNDEEP
htmlcssjquery-mobile
Mazzy
Mazzy

Reputation: 14189

radio button not perfectly aligned

who can tell me why the radio button has this strange behaviour as you can see in the picture?

enter image description here

it's not aligned correctly.why there is that line? I didn't applied any css style.

here it is the html code:

<div class = "ui-grid-a">
                    <div class = "ui-block-a">  
                        <div data-role="fieldcontain" class="ui-hide-label">
                            <label for"date">Birth Date</label>
                            <input type="datetime" name="dt" id="dt" value="" placeholder="Birth Date" style="width: 50%"/>
                        </div>
                    </div>

                    <div class = "ui-block-b">
                        <div data-role="fieldcontain">
                            <fieldset data-role="controlgroup" data-type="horizontal">
                                <input type="radio" name="male" id="male" value="male" />
                                <label for="male">M</label>

                                <input type="radio" name="female" id="female" value="female" />
                                <label for="female">F</label>
                            </fieldset>
                        </div>
                    </div>
                </div>

Upvotes: 0

Views: 1375

Answers (3)

Sparky
Sparky

Reputation: 98738

It appears as if the CSS controlling the fieldset surrounding your radio buttons is the culprit. I pulled the following from the default jQuery Mobile CSS.

.ui-controlgroup, fieldset.ui-controlgroup { padding: 0; margin: .5em 0 1em; }

There is a top margin of .5em and a bottom margin of 1em. Adjust those to see if it makes any difference at all.

Upvotes: 3

rikitikitik
rikitikitik

Reputation: 2450

JqueryMobile automatically adds margins to the constructs it creates. I'm guessing the fieldset tags or the radio buttons themselves have additional margins from the conversion. Try adding a height property to the parent div and see if that works.

Also, the line appears when you have a narrow viewport when you use the data-role="fieldcontain". If the viewport is wider, it automatically disappears. It's JqueryMobile's way of organizing stuff around. It's usually used to group a label and its control together, so you might get a better result by not using one in that particular row of controls.

Upvotes: 0

Jon-Erik Nissen
Jon-Erik Nissen

Reputation: 45

Without seeing the css I can't say for sure, but it looks like you have a default margin set on that radio button. Try resetting it with this:

input {
    padding: 0;
    margin: 0;
}

Upvotes: 0

Related Questions