Having trouble with aligning radio buttons in Flexbox

Attempting to align a radio button and its label using the display: flex; property on the parent element.

However, if the label of the radio button spans multiple lines, the button seems to shrink in width despite being explicitly set.

Below is the snippet of my HTML/CSS code:

label {
    display: flex;
    padding: 10px;
    margin: 10px;
    background-color: lightgrey;
    cursor: pointer;
  }

  input[type="radio"] {
    width: 12px;
    margin-right: 1em;
  }
<div class="flex-radios">
    <label>
      <input type="radio" /> Lorem ipsum.
    </label>
    <label>
      <input type="radio" /> Lorem ipsum..Lorem ipsum.. (too long to finish here)
    </label>
  </div>
htmlcssflexboxradio-button

Answer №1

When the text inside the label element becomes longer, it will start expanding to occupy more width until it reaches 100% of the available width and begins breaking into multiple lines. This expansion causes the 

<input type="radio">
element to shrink proportionally as the text grows due to the default value of flex-shrink being set to 1. As a result, the radio button (or its surrounding "margin") may appear smaller or squeezed if you have applied custom styles as shown in your screenshot.

To prevent this behavior, you can add flex-shrink: 0 to the CSS rule for the input element. This will ensure that the radio button does not shrink from its original size even when other elements within the shared flexbox take up all available space.

label {
  display: flex;
  padding: 10px;
  margin: 10px;
  background-color: lightgrey;
  cursor: pointer;
}

input[type="radio"] {
  width: 12px;
  margin-right: 1em;
  flex-shrink: 0;
}
<div class="flex-radios">
  <label>
 <input type="radio" /> Lorem ipsum.
  </label>
  <label>
 <input type="radio" /> Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum..Lorem ipsum.
  </label>
</div>

Answer №2

Make sure to set the width of the input field.

.custom-radio{
display: flex;
}
.custom-radio input{
min-width: 30px;
height: 16px;
margin: 0 10px 0 0;
}
<label class="custom-radio">
    <input type="radio"  >
    <span class="radio-label" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate maxime debitis commodi totam, quia perspiciatis vel blanditiis iste sed tempore adipisci illum aperiam, obcaecati voluptatum mollitia natus at, neque nihil.</span>
  </label>

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

What is the best way to make a div stick to the inside of another div with Bootstrap?

As a newcomer to Bootstrap 4, I am curious if there is a way to affix a div to the bottom of its parent div. My structure involves using the classes .container within a .row, along with several child divs: <div class='container'> <d ...

csstwitter-bootstrapbootstrap-4

Can one utilize the retrieval of past history or document state as a form of navigation within a browser?

Concerned that I may not receive a response from Stack Overflow due to lack of response on my previous question. While not necessary to fully read the previous question, it may provide context for my current inquiry. My company offers an HTML document bui ...

javascripthtmlgoogle-chromesafarimicrosoft-edge

Is there a way to make the menu overlap the logo on the website?

Within my Ruby on Rails Spree application that utilizes the Twitter Bootstrap gem, I have the following code snippet for the header section: <body class="<%= body_class %>" id="<%= @body_id || 'default' %>" data-hook="body"> & ...

htmlcssruby-on-railstwitter-bootstrap

What is the best way to extract HTML elements during the process of web scraping?

Currently, I am attempting to extract data from a webpage using Python. Here is my existing Python code... from lxml import html import requests if __name__ == "__main__": page = requests.get('https://www.example.com/example') tree = ht ...

pythonhtmlweb-scraping

"Utilize NodeJs and Multer to easily upload a variety of file types in a single form to Cloudinary

Currently, I am attempting to upload two different files within a single form in NodeJs utilizing multer and cloudinary with the .fields(fields) method. Here is an example: This is the form: <form action="/requestsList" method="POST" enctype="multipar ...

htmlnode.jsexpressmultercloudinary

Create widget that is resistant to inherited traits

In our development process, we are crafting a widget designed to be seamlessly integrated into external websites. This integration involves the dynamic injection of a div element within the body of the page using Javascript. While the widget appears satis ...

css

Guide on duplicating an HTML page with a button click

How can I duplicate HTML in a new tab when the following buttons are clicked: btn_change_folder_style_seg btn_change_folder_style_raw The content will be: <img src="./pic/web_show/3_seg/01.jpg" alt=""> <img src="./pic/web_show/3_seg/02.jpg" al ...

htmlcloneatag

Is it more effective to be precise when choosing IDs in CSS?

If you have a unique identifier on a div element called main, how should you reference it in CSS - with div#main or just #main? What is considered best practice? Considering that only one element can have a specific id, using div#main essentially duplicat ...

htmlcsscss-selectors

What is the best way to enhance the visibility of the navigation items in my Bootstrap 4 navbar?

While working with Bootstrap 4, I encountered an issue where the text navigation items in the navbar were appearing semi-transparent regardless of my efforts to adjust the code. The dark blue background color of the navbar was causing the opacity to make i ...

htmlcssbootstrap-4

swapping out all content within the body tag of the HTML document

When trying to replace the entire HTML inside the body tag with new content, I encountered issues with the code. The first code did not display the content, while the second code displayed the new content without clearing the old content. Here is the firs ...

javascripthtml

How can I reset the validation method on a form when the first input field is clicked on? (Utilizing the jQuery Ajax Form Plugin and Magnific

Utilizing the jQuery Ajax Form Plugin in conjunction with the magnific popup plugin ajax type to update content dynamically. This is the form structure: <form method="post" action="/contact" id="contact_form"> <d ...

javascripthtmljqueryajaxjquery-forms-plugin

Easiest method for transferring live data from a SQL database in Node.js to HTML at one-second intervals

Currently, I am in the process of developing an app and facing a challenge where I need to pass real-time data from my SQL database (using the node-mysql module) to an HTML file that is being rendered. While I can successfully pass static data, the struggl ...

javascripthtmlmysqlnode.jsajax

How can I prevent placeholder text from being included when submitting a form using serialize()?

After submitting my form, I save the data using an $.ajax function with $("#formName").serialize() call. One issue I'm facing is that the placeholder text gets submitted along with the serialize() action. I have a function in place to reset the plac ...

htmljqueryplaceholder

Display an image tag using the site_url() function within PHP brackets

I have a loop in my view that is fetching all the data from the database: <?php foreach($content as $contentRow): ?> <?php echo $contentRow->value; ?> <?php endforeach; ?> This loop works well for HTML strings ...

phphtml

Struggling to center an image within a CSS border

I'm attempting to include a subtle border around an icon. The issue I am facing is that the image is positioned at the top of the bordered area, whereas I want it centered. Here's how it currently appears: This is my current border CSS style: ...

css

The not() function only applies to immediate children and does not impact any nested

There is a very odd behavior with the "not()" css selector that I am experiencing. Here is my simplified code snippet: <div id="mapDiv" class="mapDiv mapDiv1"> pippo <div class="gm-style">pluto</div> </div> <div id="ma ...

css

How can I limit the number of words displayed in Bootstrap?

Hey there, I'm looking to create a blog website design where the content is limited to around 80 words. Is there a way to break the text at a certain point? I've attempted using: overflow:hidden; But this method only works for a single line of ...

htmlbootstrap-4

Switch the GChart graph type using a button in Vue

<GChart id="theChart" :type="newChartType" :data="chartData" :options="chartOptions()" :resize-debounce="500" :events="chartEvents" ref="gChart" /> < ...

javascripthtmlvue.jschartsgoogle-visualization

Limit the text input area in HTML to a fixed size, preventing any text from exceeding the specified boundary

Is there a way to create a fixed line text area that limits the user from typing beyond a certain number of lines and maximum width? My current CSS styling for this is as follows: .area-style { resize: none; width: 324px; height: 200px; m ...

javascriptcsshtmltextarea

What is the method, by using JavaScript or CSS, to include extra space at the end of text block without starting a new line?

Imagine having some text, and at the conclusion of each paragraph there is a (more)... link. The layout ends up looking like this: This is just an example paragraph. Click on the more link for additional information. (more...) Now comes the desire to i ...

javascripthtmlcsslayout