Ensure that radio buttons are positioned next to their respective labels on separate lines

My HTML form is structured with sections as described below:

I prefer having the labels inline to prevent the section from being excessively tall, but I'm facing an issue where the radio buttons are not staying aligned with their respective labels.

It's important to note that the labels vary in length and are dynamically generated from server data. As a result, setting a fixed width div would lead to spacing inconsistencies.

If there's a recommended approach to solve this problem in a more conventional way, I'd appreciate some guidance on how to achieve it.

htmlcssforms

Answer №1

Wrap each input/label pair in a span and apply the CSS property white-space: nowrap to the span like so:

<div class="radios">
    <span>
        <input type="radio" id="productTypeRC" />
        <label for="productTypeRC">RC</label>
    </span>
    ...
</div>

CSS:

.radios > span
{
    white-space: nowrap;
}

Update: There is an issue in Chrome where the pairs do not wrap properly and get hidden. This problem is discussed in this question on Stack Overflow: Text doesn't wrap properly between elements having white-space: nowrap. Possible solutions are using float: left with additional margin to compensate for spacing issues, or adjusting the HTML structure until it displays correctly. Placing the <input> and <label> tags in the same line as the <span> resolves the problem.

<div class="radios">
    <span><input type="radio" id="productTypeRC" /> <label for="productTypeRC">RC</label></span>
    <span><input type="radio" id="productTypeTC" /> <label for="productTypeTC">TC</label></span>
    <span><input type="radio" id="productTypeNS" /> <label for="productTypeNS">NS</label></span>
    ...
</div>

Visit jsFiddle demo

Answer №2

Place the checkbox within the label tag (yes, it's valid) and style the label as inline-block (check out a demo on this JSfiddle). In my opinion, this approach is more elegant and semantically sound compared to using a span to wrap the radio buttons with their labels as was previously suggested by gilly3. I felt compelled to share this alternative solution even though an answer has already been accepted.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The poker table designed with CSS does not resize effectively when displayed in smaller dimensions

I have put together a CSS poker table design that I am quite happy with at the moment: https://jsfiddle.net/78fcs01m/3/ CSS: .poker-container { display: grid; width: 100vw; height: 100vh; .poker-table { justify-self: cent ...

cssresponsive-design

Angular and Bootstrap work hand in hand to provide a seamless user experience, especially

I have been exploring ways to easily close the modal that appears after clicking on an image. My setup involves using bootstrap in conjunction with Angular. <img id="1" data-toggle="modal" data-target="#myModal" src='assets/barrel.jpg' alt=&a ...

htmlangulartypescriptbootstrap-4

Send the user to a specified destination

Currently, I am working on creating a form that allows users to input a location and have the page redirect to that location after submission. However, I am facing difficulty in determining how to set the value for action="" when I do not know what the loc ...

javascriptphphtmlweb

Issue with Ajax sending data to PHP to delete specific SQL row is hindering success

I am struggling to implement a feature where my users can delete a listing by filling out an HTML form that triggers an AJAX function to send the data to a PHP script. Additionally, I want to include a confirmation message before the deletion process start ...

phphtmlajaxforms

Ways to eliminate undesired margin

I am struggling with formatting an HTML list into columns and I can't seem to remove the space between each column. It's frustrating because I want the list to display like rows, without any spacing or at least the ability to control the size of ...

htmlcsshtml-lists

My experience with jquery addClass and removeClass functions has not been as smooth as I had hoped

I have a series of tables each separated by div tags. Whenever a user clicks on a letter, I want to display only the relevant div tag contents. This can be achieved using the following jQuery code: $(".expand_button").on("click", function() { $(th ...

javascriptjqueryhtmlcss

Exploring the ins and outs of webpage loading speed

I am working on writing JavaScript code that includes a button to open a webpage of my choice. I now want to understand how to detect when the page I called is finished loading. Any suggestions or ideas on this topic? I apologize if my explanation was no ...

javascripthtmlcss

Browser unresponsiveness triggered by excessive Ajax setInterval functionality

Here is the test code I am currently using: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Ajax - one variable test</title> <style> body{ font-size: 12px; font-family: Arial;} </styl ...

jqueryhtmlajax

What are effective strategies to stop the generic * { … } style from overriding its parent tag?

How can I prevent my general * { ... } style from overriding the parent tag? In the given scenario, I want the text "sssssssss" to have the style text-huge. .text-huge { font-size: 28px !important; color: green !important; } * { font-size: 12px; ...

htmlcss

Adjust the header width and column alignment when freezing the header in a gridview interface

Looking to implement a gridview with a fixed header? I've tried various solutions including this link and this one. While I've managed to get it working, the main issue lies in the alignment of header width and column width. The scroll and freez ...

htmlcssasp.netgridview

Angular directive for concealing the 'ancestor' of an element

I have created a code snippet that effectively hides the 'grandparent' element of any '404' images on my webpage. Here is the code: function hideGrandparent(image){ image.parentNode.parentNode.style.display = 'none'; } < ...

javascripthtmlcssangularjsangularjs-directive

flexbox: Two vertical icons tightly aligned without any space

Hey everyone, I've been working on this layout: https://i.sstatic.net/4Aye0.png Here's what I tried so far: Resetting padding and margin in the <a href> and in the <img src...> HTML container <div> <div className="pe ...

htmlcssreactjsflexbox

Changing the color of a placeholder using Javascript: A step-by-step guide

I've been searching online without any luck so far. I'm attempting to change the placeholder color of a text box using JavaScript, but I'm not sure how to go about it. I already have a color picker that changes colors. If my CSS looks somet ...

javascripthtmlcsspseudo-element

Responsive dropdown menu in Bootstrap 5 navbar

Update: I successfully fixed the desktop version. Now, I just need to work on making it responsive for mobile. The problem I am encountering is that the dropdown menu doesn't function properly on both mobile and desktop. Although the styling looks go ...

htmlcssmenunavbarbootstrap-5

MUI Typography - Text turns white when hovered over

I've created a customized component that turns green on hover. Here's the code for it: const ProjectAdd= styled.div` background-color: white; list-style-type: none; list-style: none; height: 100%; width: 10%; height: 100%; border-ra ...

cssreactjsmaterial-ui

JavaScript validation for a form dynamically generated within a table

NOTE: Utilizing Foundation 6 along with the Abide Form Validation. I'm currently working on implementing automatic form validation for a website. The approach I've taken involves creating a table (using the jQuery Datatables library) with multip ...

javascriptjqueryformsvalidationdatatables

Flex-boxes are set inside a fixed-positioned div in this chat web application

I am currently working on a chat web application that has a unique bottom bar layout. The bottom bar consists of a button on the left, a text entry field in the center, and another button on the right: <div id="bottom-bar"> <div class=" ...

htmlcssflexbox

Repeating percentages displayed in a progress bar

I created a responsive progress bar, but the progress values are repeating. I only want the central value to be displayed. Any suggestions on how to fix this issue? DEMO <div id="tab1"> <dx-data-grid class="tableTask" [dataSource]="datas" ...

htmlcssangulartypescript

Preserve query parameters in Laravel 5.3 when passing additional GET values

Is there a way to maintain the values passed from another route on my dashboard? Here is how the dashboard URL appears after receiving a GET request from another route: http://localhost:8000/?lat=45.328686399999995&lng=14.446922599999999 Whe ...

phpformslaravelgetrequest

Ensure that the context is used to effectively clear any existing data from the previous bar chart

I recently came across a cool codepen demo on this link. Upon clicking the first button followed by the second, the data transitions smoothly. However, there seems to be an issue where when hovering randomly over the bar charts at this source, the value ...

javascripthtmlcss