Uneven radio buttons on Safari Mobile

user_7808346 0
Viewed 713

Problem

Uneven radio button size on Safari iphone devices, first radio button is small as compare to second one

In other browsers for iphone devices it is fine.

Code

<div style="border: thin solid lightgray; border-top-left-radius: 2%; border-top-right-radius: 2%; border-bottom-right-radius: 2%; border-bottom-left-radius: 2%;">
        <br>
        <label style="font-weight: bold; display: contents;">Return options: </label>
        <div class="radio center-label">
            <input type="radio" id="0" name="radio" value="0" style="margin: 1%;">
            <label for="0" style="white-space: pre-line;">Purchase a FedEx return label - $9.50. Price will be deducted from your refund. We will email your return label within 15 minutes</label>
            <br>
            <br>
        </div>
        <div class="radio center-label">
            <input type="radio" id="1" name="radio" value="1" style="margin: 1%;">
            <label for="1" style="white-space: pre-line;">Ship it yourself</label>
            <br>
            <br>
        </div>
    </div>


.center-label {
 display: flex;
 margin-left: 15%;
 margin-right: 15%;
}
@media (max-width: 992px) {
    .center-label {
       display: flex;
       margin-left: 3%;
       margin-right: 3%;
    }
}

enter image description here

EDIT

When I am removing the centre-label, uneven behaviour is fixed, I don't know why.

TIA

css html
2 Answers

when you add flex to the container, the children elements will share the space. and the first label text is longer, so this label take more space than the other label. you can set fixed width with flex css look here: css tricks flex box guide

user_56084900

Changing display: block fixed the issue.

@media (max-width: 992px) {
.center-label {
   display: block;
   margin-left: 3%;
   margin-right: 3%;
}
}

After going through this, I concluded that: In display: block line-height of the div is fixed while in display: flex line-height is variable i.e. not fixed.

Is this conclusion correct or I've made it wrong, in case of wrong anybody can give the right source from where I can understand this concept completely.

TIA

user_78083460
Related