Struggling to position radio buttons and their corresponding labels on the same line

Question

Struggling to position radio buttons and their corresponding labels on the same line

Here is a preview of the current page layout.

Image showing misalignment of radio buttons and labels

This snippet shows the JSP code being utilized.

<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 attempted to use inline styling such as

display: inline!important;

on both input and label tags but without success.

Upon inspecting in Chrome Developer Tools, I noticed an additional attribute affecting the radio buttons' appearance. However, I am unsure of its source.

element.style {
    display: block;
}

Could someone recommend a method to override the existing styles on this element to align the radio buttons and their labels in one line? As a newcomer to front-end development, any assistance would be greatly appreciated. Additionally, help in identifying the origin of this unexpected styling (is it possible using Chrome Developer tools?)

javascript jquery html css jsp

Answer 1

Answer №1

To solve this issue, a quick fix would be to include the CSS property "float: left" in 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 eliminates the need to worry about changing to display:inline-block. The code snippet proves that it works seamlessly even when the radio buttons have display:block set.

<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>

Here is a comparison image of before and after:

https://i.sstatic.net/fRmgT.png

Answer 2

To solve this issue, a quick fix would be to include the CSS property "float: left" in 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 eliminates the need to worry about changing to display:inline-block. The code snippet proves that it works seamlessly even when the radio buttons have display:block set.

<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>

Here is a comparison image of before and after:

https://i.sstatic.net/fRmgT.png

Answer 3

Answer №2

After 'fmt' write the following:

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

I have a feeling that this will do the trick.

Answer 4

After 'fmt' write the following:

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

I have a feeling that this will do the trick.

Answer 5

Answer №3

There was an error in your approach. The correct name was overlooked.

Alter it to display:inline-block;

In the instance presented below, I applied this to the div elements. However, this CSS can be utilized on any element you desire.

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>

Answer 6

There was an error in your approach. The correct name was overlooked.

Alter it to display:inline-block;

In the instance presented below, I applied this to the div elements. However, this CSS can be utilized on any element you desire.

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>

Struggling to position radio buttons and their corresponding labels on the same line

Answer №1

Answer №2

Answer №3

Similar questions

Utilize the converse.js plugin to set up a secure room with password protection

Ready to customize your CSS settings?

AngularJS and ExpressJS clash in routing (Oops, Crash!)

What steps do I need to take in order to create a web-based file uploader that supports simultaneous uploads of multiple files

Challenge with placing a child element in CSS on Firefox and Internet Explorer

What is the best way to modify unchanging text within a span using Jquery?

Sending a request to a PHP file using Ajax in order to display information fetched from

Customize CSS to target the first and last elements in a row using flexbox styling

Customizing button appearances in the control div on Google Maps - A guide

Leveraging ASP.NET MVC 5 to integrate an online document viewer from Office 365, seamlessly displaying Word documents within a sleek, compact window

jQuery is attempting to create an animation by combining three variables to determine a new height

When utilizing the jQuery function $(event.target).closest('td'), it tends to become disoriented when invoked multiple times simultaneously within the same function

Masking text in React Fiber/Drei can be achieved through a variety

Why don't inline style changes implemented by JavaScript function properly on mobile browsers like Chrome, Dolphin, and Android?

The value of `this` from React Store is currently returning null

Using Javascript to prevent css from changing the display

How can we increase the accuracy of numerical values in PHP?

How to apply a border to a CSS3 triangle shape

What could be causing my Styled Components not to display the :before and :after pseudo elements?

A step-by-step guide to extracting live data using cheerio and socketio