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.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jcandan created an issue. See original summary.

jcandan’s picture

Version: 7.x-3.6 » 7.x-3.x-dev
Issue summary: View changes
jcandan’s picture

Radix 7.x-3.x-dev does not exist. Patch applies to 7.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.

jcandan’s picture

Attaching the Patch, missed in previous comment.

Radix 7.x-3.x-dev does not exist. Patch applies to 7.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.

jcandan’s picture

Status: Active » Needs review

I 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.