Unable to align radio buttons and their labels in one line

user_6337262 0
Viewed 77

Below is a snippet of the appearance of current page.

Radio buttons and their labels not in single line

Below is the piece of code is being used. (JSP)

<div class="leftFormComp" style="width: 100%;">
  <label class="inputLabel" for="ext-comp-1045">
   <span class="required">*</span><fmt:message key="registration.agreement"/>
  </label>

  <div id="x-form-el-ext-comp-1045" class="x-form-element" style="padding-left: 8px;">
   <div id="ext-comp-1045" class=" x-form-checklist" style="width: 344px; height: auto;">

    <div class="x-form-cb-li x-form-cb-li-h" style="padding-bottom: 5px">
      <input id="termsAgree-Y" class="x-form-field" type="radio" value="Y" name="termsAgree"> <label class="x-form-cb-label" for="termsAgree-Y"><fmt:message key="registration.yes"/></label>
    </div>

    <div class="x-form-cb-li x-form-cb-li-h">
      <input id="termsAgree-N" class="x-form-field" type="radio" value="N" name="termsAgree"> <label class="x-form-cb-label" for="termsAgree-N"><fmt:message key="registration.no"/></label>
    </div>

   </div>
  </div>

</div>

I have tried using inline styling like 

display: inline!important;

with input and label tags but nothing is working.

While checking in Chrome Developer mode, I came across an extra attribute that was getting appended in the input tags of both the radio buttons and I am unable to figure out from where it is coming.

element.style {
    display: block;
}

Can someone please suggest way to override all existing stylings that are getting implemented on this element, so as to bring the radio buttons and their labels in one line. I am new to front-end part, so please help me out. Also, help me find the origin of this styling (Can it be found using Chrome Developer tool)

css jsp html jquery javascript
3 Answers

Just write after fmt

<label class="x-form-cb-label" for="termsAgree-Y">
      <fmt:message key="registration.yes" />Yes
</label>

i think it will work.

user_103909930

You did that wrong. You missed the right name.

change it into display:inline-block;

In the example below I used it onto the div's. But this css will work on every element you want.

div{display:inline-block;}
<div class="leftFormComp" style="width: 100%;">
  <label class="inputLabel" for="ext-comp-1045">
   <span class="required">* Subject</span><fmt:message key="registration.agreement"/>
  </label>

  <div id="x-form-el-ext-comp-1045" class="x-form-element" style="padding-left: 8px;">
   <div id="ext-comp-1045" class=" x-form-checklist" style="width: 344px; height: auto;">

    <div class="x-form-cb-li x-form-cb-li-h" style="padding-bottom: 5px">
      <input id="termsAgree-Y" class="x-form-field" type="radio" value="Y" name="termsAgree"> <label class="x-form-cb-label" for="termsAgree-Y"><fmt:message key="registration.yes"/>Yes</label>
    </div>

    <div class="x-form-cb-li x-form-cb-li-h">
      <input id="termsAgree-N" class="x-form-field" type="radio" value="N" name="termsAgree"> <label class="x-form-cb-label" for="termsAgree-N"><fmt:message key="registration.no"/>No</label>
    </div>

   </div>
  </div>

</div>

user_103147780

An easy way to fix this would be to simply add "float: left" to the radio buttons.

<input style="float:left" id="termsAgree-N" class="x-form-field" type="radio" value="N" name="termsAgree"> 
<label class="x-form-cb-label" for="termsAgree-N"><fmt:message key="registration.no"/></label>

This means you don't need to worry about changing to display:inline-block. This snippet demonstrates that it works even when the radio buttons are set to display:block.

<div>
  <input type="radio" style="display:block;" />
  <label>without float:left</label>
</div><br/>

</br/>
<div>
  <input type="radio" style="display:block; float:left" />
  <label>with float:left</label>
</div>

This is a picture of before and after:

enter image description here

user_46004030
Related