Vimalan Jaya Ganesh Vimalan Jaya Ganesh - 1 month ago 22
CSS Question

bootstrap: display radio button in center of words

I want to display the radio button in center of two words but, it is not working as expected.

Fiddler: https://jsfiddle.net/ebwwvy6m/2/

HTML:

<label class="radio-inline">
Search by
<input type="radio" name="accountsearch" value="name">
Lastname, Firstname
</label>
<label class="radio-inline">
<input type="radio" name="accountsearch" value="email">
Email
</label>


Issue:

The word 'by' is getting hidden under radio button.

enter image description here

If I move the "Search by" text outside of label, then the text and radio button are not aligning in straight line.

enter image description here

How should I fix this issue? My preference is a solution without custom css.

Any suggestion will be appreciated.

Answer

Is this what you're looking for?

You have a negative margin and absolute positioning on the radio button:

.radio-inline input[type=radio] { 
    position: absolute;
    margin-left: -20px;
}

The quickest way to resolve this while still maintaining the inline display, and doing no custom overrides as you mentioned, would probably just be to separate your first label from your second:

<label class="radio-inline">
    Search by
</label>
<label class="radio-inline">
    <input type="radio" name="accountsearch" value="name">
    Lastname, Firstname
</label>
<label class="radio-inline">
    <input type="radio" name="accountsearch" value="email">
    Email
</label>
Comments