Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Problem/Motivation
When using the Radix theme's custom input-group implementation via the following example:
$form['example_length'] = array(
'#type' => 'textfield',
'#title' => t('Example Length'),
'#field_suffix' => t('cm'),
'#input_group' => TRUE,
);
The following is produced.
<div class="form-item form-type-textfield form-item-example-length-cm form-group input-group">
<label for="edit-fuel-pin-total-length-cm">Fuel Pin Total Length </label>
<input class="form-control form-text" type="text" id="edit-fuel-pin-total-length-cm" name="fuel_pin_total_length_cm" value="" size="60" maxlength="128">
<span class="input-group-addon">cm</span>
</div>
Note: the above label is inside the input-group. This is incorrect per Bootstrap documentation.
The following is from Bootstrap's documentation. Note the use of .input-group
around the input and it's input group addons, and it does not include the <label>
.
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
Proposed resolution
The fix is to remove .input-group
from the .form-group
div, and make it a separate div inside the form-group. Then have the <label>
above that.
Comment | File | Size | Author |
---|---|---|---|
#4 | radix-disinclude-label-from-input-group-wrapper-2874908-4.patch | 1.57 KB | jcandan |
Comments
Comment #2
jcandan CreditAttribution: jcandan commentedComment #3
jcandan CreditAttribution: jcandan at Code Journeymen commentedRadix
7.x-3.x-dev
does not exist. Patch applies to7.x-3.x
.This patch attempts to address the issue by supplying
.input-group
as a separate div inside the.form-group
div, by appending it's opening and closing tags to the$prefix
and$suffix
respectively.Comment #4
jcandan CreditAttribution: jcandan at Code Journeymen commentedAttaching the Patch, missed in previous comment.
Radix
7.x-3.x-dev
does not exist. Patch applies to7.x-3.x
.This patch attempts to address the issue by supplying
.input-group
as a separate div inside the.form-group
div, by appending it's opening and closing tags to the$prefix
and$suffix
respectively.Comment #5
jcandan CreditAttribution: jcandan at Code Journeymen commentedI understand that this patch is not likely to be merged into radix-7.x-3.x because it's likely no longer under active development, but at least the patch is here for other's who are also working with Radix in Drupal 7, and hope to take advantage of the Bootstrap input-group properly formatted with the label outside of the input-group div.