Prevent Wrapping of Text Below Radio Buttons

Prevent wrapping of text below radio buttons

It's pretty simple, just turn your label element to display: block; and use margin-left for the label and float your radio button to the left

Demo

Demo 2 (Nothing fancy, just used multiple radio for the demonstration)

input[type=radio] {
    float: left;
}

label {
    margin-left: 30px;
    display: block;
}

Just note that say if you are storing the radio with the labels in an li element, something like

<ul class="radiolist">
    <li>
        <input type="radio"><label>Your text goes here</label>
    </li>
</ul>

So make sure you self clear them by using something like

.radiolist li:after {
    content: "";
    clear: both;
    display: table;
}

That will ensure that you are self clearing all the li elements, and about the :after psuedo, it is well supported in IE8 so nothing to worry about.

How to Prevent long text label wrapping under the checkbox/radio button?

Keeping the existing markup, one simple way to achieve something close is using inline-block on the 3 children of .indi-wrap, and a max-width to fit them all in a single line.

.indi-wrap > * {
    display: inline-block !important;
    max-width: 70%;
    vertical-align: top;
}

.wrap {

  width: 220px;

}

.indi-wrap {

  padding-bottom: 10px;

  display: block;

}

.indi-wrap > * {

    display: inline-block !important;

    max-width: 70%;

    vertical-align: top;

}

.control-label {

  font-weight: 300;

}

button.btn-link {

  background: 0;

  border: 0;

  padding: 0;

  margin: 0;

}

<div class="wrap">

  <div class="indi-wrap">

    <input type="checkbox" />

    <label class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</label>

    <button type="button" class="btn btn-link">only</button>

  </div>

  <div class="indi-wrap">

    <input type="checkbox" />

    <label class="control-label">Xonsectetur adipiscing.</label>

    <button type="button" class="btn btn-link">only</button>

  </div>

  <div class="indi-wrap">

    <input type="checkbox" />

    <label class="control-label">Sed do eiusmod tempor incididunt ut labore.</label>

    <button type="button" class="btn btn-link">only</button>

  </div>

</div>

Radio buttons dropping text below radio button

One thing you can try is putting the input inside the label tag; this way the text will wrap and continue in a new line but the first one will always stay at the side of the input.

.example-2 {

  display: flex;

}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">

  <div class="col-lg-12">

    <div class="form-group">

      <label for="Valid-Driver-License">

       <input id="Valid-Driver-License" name="residenceProof" type="radio" required value="#form.FLDL#" />

      A valid driver license or ID card with photo issued by any US state or territory (Florida driver license must indicate a Manatee County address)</label>

    </div>

  </div>

</div>

<div class="row">

  <div class="col-lg-12">

    <div class="form-group">

      <input id="Canadian-Driver-License" name="residenceProof" type="radio" required value="#form.Canadian#" />

      <label for="Canadian-Driver-License">A Canadian driver license or ID card </label>

    </div>

  </div>

</div>

<div class="row">

  <div class="col-lg-12">

    <div class="form-group">

      <input id="Valid-Passport" name="residenceProof" type="radio" required value="#form.Passport#" />

      <label for="Valid-Passport">A valid US or out-of-country passport</label>

    </div>

  </div>

</div>

<div class="row">

  <div class="col-lg-12">

    <div class="form-group">

      <label for="Power-Of-Attorney-Copy">

      <input id="Power-Of-Attorney-Copy" name="residenceProof" type="radio" required value="#form.POA#" />

      If transaction is being completed by <a href="https://www.powerdms.com/public/MCTC/documents/1474142" target="_blank">Power of Attorney</a> a copy of the valid driver license, identification card or passport for both the applicant <font color="red">and</font> the person appointed power of attorney is required. <font color="red">If the Power of Attorney appoints a business/dealership alone or with an individual, the business/dealership must include a letter of authorization on their letterhead stating that the person who is signing by power of attorney on their behalf is authorized to do so.</font></label>

    </div>

  </div>

</div>

<!-- New Example -->

<div class="row">

  <div class="col-lg-12">

    <div class="form-group example-2">

      <input id="Power-Of-Attorney-Copy" name="residenceProof" type="radio" required value="#form.POA#" />

      <label for="Power-Of-Attorney-Copy">

      If transaction is being completed by <a href="https://www.powerdms.com/public/MCTC/documents/1474142" target="_blank">Power of Attorney</a> a copy of the valid driver license, identification card or passport for both the applicant <font color="red">and</font> the person appointed power of attorney is required. <font color="red">If the Power of Attorney appoints a business/dealership alone or with an individual, the business/dealership must include a letter of authorization on their letterhead stating that the person who is signing by power of attorney on their behalf is authorized to do so.</font></label>

    </div>

  </div>

</div>

How do you stop RadioButtonList Label text from wrapping under the button

This CSS actually does the trick:

<style type="text/css">
 table.radioWithProperWrap input
 {    
      float: left;
 }

 table.radioWithProperWrap label
 {    
      margin-left: 25px;
      display: block;
 }
</style>
<asp:RadioButtonList runat="server" CssClass="radioWithProperWrap" ....>

Make radio button and label in same line and when label text is big wrap in multiplelines

The easiest solution is to add display:flex to wrapper:

.wrapper {

 display:flex;

}

<div class='wrapper'>

<input type='radio'>

<label class='label'>This is a very big text and should wrap as attached in image text and should wrap as attached in imag</label>

</div>

text wrapping incorrectly for radio button

First of all, the use of a <br /> is generally not recommended, it's a lot better to try and use the margin CSS property to create space between elements.

It's also best in this situation to use CSS to do what you want to do. This is because by default those elements won't have this kind of behaviour.

In this case you would want something that looks like this:

<div style="width:300px">
    <input type="radio" class="radioLeft" />
    <div class="textBlock">
        Some text that is too long to fit inline and must be broken 
        up over multiple   lines.Some text that is too long to fit inline 
        and must be broken up over multiple lines.Some text that is too 
        long to fit inline and must be broken up over multiple lines.
    </div>
    <div style="clear:both;"></div> //this is important for repeated inputs
</div>

And then your CSS would look like this:

.radioLeft
{
   float: left;
}

.textBlock
{
    float: left;
    width: 80%; //Adjust this value to fit
}

Radio button text covers options below

I have cleaned up a few things and created a new fiddle from your pen here.

Firstly, I've tried removing the absolute positioning being used in a lot of places.
I've also made use of the feature that the label element provides which is interaction with the input elements.

I've moved your radio elements inside the label and have also moved the bullet animation accordingly.

Overall, the label element is now being used as a wrapper for all your elements inside of it, and hence those elements would align themselves based on the size of their parent.

P.S., since I tried to wrap this up quickly, I've center-aligned the bullet inside your label using the translate(-50%) hack. There are other cleaner ways of doing this but this one was just a quicker way for now.

How do I prevent line breaks between a radio button and its label, while still allowing line breaks within the label itself?

First, move the radio buttons inside your labels. This adds the nice feature that you can select the radio buttons by clicking the text. Then add a span around the text.

<div class="chopped box">
 <label>
  <input type="radio"/>
  <span class="wrappable">This is a really long string with no spaces</span>
 </label>
</div>

<div class="chopped box">
 <label>
  <input type="radio"/>
  <span class="wrappable">This_is_a_really_long_string_with_no_spaces</span>
 </label>
</div>

Second, add the following style to your css:

label {
    white-space:nowrap;
}

.wrappable {
    white-space:normal;
}

The white-space style on the label prevents the linebreak between the radio button and the text, and the span around the text allows it to wrap just within the text.

---

Related Topics