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.
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?
Thank you,
Kelso
.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
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
Bob
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
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
Bob
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
This topic is locked and no more replies can be posted.
