Text Wrapping Incorrectly for Radio Button

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
}

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.

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>

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>

Text in neighboring divs unaligned due to radio button?

Try making the inner spans have the same line-height as the divs (22px) and then setting the vertical-align to be middle.

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>

Angular Material Radio Button Wrap Text

There are 2 points to solving this.

1) Consider ViewEncapsulation For that reason I have added encapsulation: ViewEncapsulation.None to your Component decorator. If you don't specify ViewEncapsulation.None then all your styles are encapsulated and they don't bleed out so they can't affect your child radio component. If you don't want to do that then apply CSS rule in "general" stylesheet.

2) After that it is important to have right CSS selector which will overwrite original. You could use something general like .example-radio-button > * and then define white-space in conjunction with !important or be more specific with the selector like .example-radio-button .mat-radio-label and then you don't need !important

Working example can be found here -> https://stackblitz.com/edit/angular-material-radio-button-wrap-text-paghtt

---

Related Topics