Forums

Labels Wrapping Text (Radio Box)

KelsoUSMC 26 Feb, 2016
I was wondering if there is a field within the interface to prevent the Label Text from wrapping. I noticed the fields for all Labels are fixed at 160px.
.gbs3 .gcore-label-left {
  float: left !important;
  min-width: 160px;
  max-width: 160px;
  padding-right: 7px;
  text-align: left !important;
}


If I was to override the width of all labels, it messes up other areas of the form and ends up moving text boxes to the next line. The 2nd line (beginning with <label for="coach-b-team"... is what I want to prevent from wrapping (ie. increase the width of ONLY the label).

Below is the code extracted by the Inspect Element tool within my browser.
Is it possible to prevent individual labels from wrapping? or setting the width to 'auto' to prevent wrapping without affecting other labels within the form?

<div class="form-group gcore-form-row" id="form-row-coach-b-team">
<label for="coach-b-team" class="control-label gcore-label-left gcore-label-checkbox">Willing to coach a B team?</label>
<div class="gcore-input gcore-display-table" id="fin-coach-b-team"><div class="gcore-single-column" id="fclmn">
<div class="gcore-radio-item" id="fitem">
<input name="coach-b-team" id="coach-b-team" value="1" class="A" title="" style="min-width: 195px; max-width: 205px;" data-load-state="" data-tooltip="" type="radio"><label class="control-label gcore-label-checkbox" for="coach-b-team">Yes</label>
</div>
<div class="gcore-radio-item" id="fitem1">
<input name="coach-b-team" id="coach-b-team1" value="0" class="A" title="" style="min-width: 195px; max-width: 205px;" data-load-state="" data-tooltip="" type="radio"><label class="control-label gcore-label-checkbox" for="coach-b-team1">No</label>
</div>
</div></div>
</div>


Thank you,
Kelso
GreyHead 27 Feb, 2016
1 Likes
Hi Kelso,

The simplest solution is to switch to using Label over for the radio buttons - example 2

Or you can add some CSS to make the individual labels wider as in example 3
label[for=radio4] {
  width: 200px !important;
  max-width: 200px !important;
}

Bob
GreyHead 27 Feb, 2016
Answer
Hi Kelso,

The simplest solution is to switch to using Label over for the radio buttons - example 2

Or you can add some CSS to make the individual labels wider as in example 3
label[for=radio4] {
  width: 200px !important;
  max-width: 200px !important;
}

Bob
KelsoUSMC 28 Feb, 2016
Perfect! That is exactly what I was looking for.
Enjoy your coffee. It's American coffee. Hope you don't mind.

Kelso
This topic is locked and no more replies can be posted.