Height of .radio-inline

[tivnet]

Edit:

The height of a .radio-inline group is not the same as the height of other single-line controls, making it hard to align in a tabular form.

---

Original issue (bogus)

For some reason, radio buttons on Chrome had some large height, so the form row was impossible to align.

This helped in my case:

.radio-inline {
  height: 1em;
}

[cvrebert]

so the form row was impossible to align.

Example please?

[tivnet]

Copied part of the form below.
I used min-height: 63px; to make the radio group same height as regular input groups.
Worked well on FireFox, but on Chrome I had to apply the height: 1em patch.

<div class="row">
        <div class="col-md-6">
                    <div class="form-group">
            <label for="FirstName">First Name:</label>

            <input type="text" required="required" id="FirstName" name="FirstName" class="form-control">
        </div>
            <div class="form-group">
            <label for="LastName">Last Name:</label>

            <input type="text" required="required" id="LastName" name="LastName" class="form-control">
        </div>
            <div class="form-group">
            <label for="DateOfBirth">Date of Birth:</label>

            <input type="date" required="required" id="DateOfBirth" name="DateOfBirth" class="form-control">
        </div>
            <div class="form-group">
            <label for="Age">Age as of July 9, 2014:</label>

            <input type="number" pattern="[1-9][0-9]?" step="1" max="99" min="3" required="required" id="Age" name="Age" class="form-control">
        </div>
            <div style="min-height: 63px;" class="form-group">
            <div>
                <label>Gender:</label>
            </div>

            <div class="radio-inline">
                <label>
                    <input type="radio" value="male" id="male" name="Gender">
                    M
                </label>
            </div>

            <div class="radio-inline">
                <label>
                    <input type="radio" value="female" id="female" name="Gender">
                    F
                </label>
            </div>
        </div>
            <div class="form-group">
            <label for="Instrument">Instrument:</label>

            <input type="text" id="Instrument" name="Instrument" class="form-control">
        </div>
            <div class="form-group">
            <label for="RCMGrade">RCM Grade (if applicable):</label>

            <input type="text" id="RCMGrade" name="RCMGrade" class="form-control">
        </div>
            <div class="form-group">
            <label for="PresentTeacher">Present Teacher:</label>

            <input type="text" id="PresentTeacher" name="PresentTeacher" class="form-control">
        </div>
            </div>

        <div class="col-md-6">
                    <div class="form-group">
            <label for="StreetAddress">Street Address:</label>

            <input type="text" required="required" id="StreetAddress" name="StreetAddress" class="form-control">
        </div>
            <div class="form-group">
            <label for="City">City:</label>

            <input type="text" required="required" id="City" name="City" class="form-control">
        </div>
            <div class="form-group">
            <label for="ProvinceState">Province/State:</label>

            <input type="text" id="ProvinceState" name="ProvinceState" class="form-control">
        </div>
            <div class="form-group">
            <label for="PostalCodeZIP">Postal Code/ZIP:</label>

            <input type="text" id="PostalCodeZIP" name="PostalCodeZIP" class="form-control">
        </div>
            <div class="form-group">
            <label for="Country">Country:</label>

            <input type="text" required="required" id="Country" name="Country" class="form-control">
        </div>
            <div class="form-group">
            <label for="Phone">Phone:</label>

            <input type="tel" required="required" id="Phone" name="Phone" class="form-control">
        </div>
            <div class="form-group">
            <label for="email">Email:</label>

            <input type="email" required="required" id="email" name="email" class="form-control">
        </div>
            <div class="form-group">
            <label for="AdditionalEmail">Additional Email:</label>

            <input type="email" id="AdditionalEmail" name="AdditionalEmail" class="form-control">
        </div>
            </div>
    </div>

[cvrebert]

Per the docs, the .radio-inline should be on the <label>, not a containing <div>.

[tivnet]

@cvrebert Thank you Chris, that was my mistake.
About the style="min-height: 63px;" - is it also something that I overlooked in the docs?

        <div class="form-group" style="min-height: 63px;">
            <div>
                <label>Gender:</label>
            </div>

            <label class="radio-inline">
                <input type="radio" name="Gender" id="male" value="male"/>
                M
            </label>
            <label class="radio-inline">
                <input type="radio" name="Gender" id="female" value="female"/>
                F
            </label>
        </div>

[cvrebert]

No. Is it still the wrong height after making that change?

[tivnet]

Radios are OK now, but the height of the entire form-group is less than a group with input type="text", so when I have them both in one row, they are not aligned. So, I put that min-height. Looks pretty ugly.

[cvrebert]

@tivnet This is within a .form-inline ?

[tivnet]

No, regular form, with two-column layout (col-md-6 each).

[cvrebert]

Could you post your example as a JS Bin?

[tivnet]

Please make the zoom to see two columns (obviously no problem on "xs")
http://jsbin.com/atExabi/3/edit
Thank you!

[cvrebert]

Confirmed after some fiddling with your JS Bin.

[cvrebert]

You hadn't made the change I prescribed. You also had extraneous <div>s.
http://jsbin.com/atExabi/9/edit

[tivnet]

Without divs it's even worse
http://jsbin.com/atExabi/7/edit

[ghost]

Chrome volt néhány nagy magasságban, így az űrlap sort lehetett igazítani.@ Márka elsődleges: # cc181e;----@ Link-hover-color: elsötétül (@ link-szín, 15%);----@ Brand-figyelmeztetés: # f25d18;----+-----,,,,.

[ghost]

AZ űrlap sort lehetett igazítani. @ Marka elsődleges: # cc181e; --- @ Brand-figyelmeztetés : # f25d18; ---- + -----,,,,.

[cvrebert]

Well, now they're at their natural/actual height. It just happens to be too short for your particular case.
@mdo Do we care about this? We'd probably also need to support .input-group-sm & input-group-lg for consistency.

[tivnet]

What I see is their natural height differs in FF/Chrome, and also depends on the font size. It would be excellent if the height of radio-inline group was always the same as height of text input group. I realize that it will always break if radio buttons laid out vertically.. but for horizontal, I believe they should match the other single-line controls.

[mdo]

For the time being, we won't be able to do this. It'd mean adding an extra div I imagine, to address the padding and alignment needs (and also the variants per @cvrebert). If you want this particular layout, use your own implementation for the time being with margin on the inline radios.

Will track for v4 when we can revisit some of this stuff.