Disinclude label from input group wrapper

Created on 2 May 2017, over 7 years ago
Updated 21 June 2024, 6 months ago

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.

✨ Feature request
Status

Closed: outdated

Version

3.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΈUnited States jcandan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024