Hi everyone,

Before v3 the input type radio or checkbox were placed outside the label like that :

<input id="edit-custom-search-paths-test-frq-key" class="form-radio" type="radio" checked="checked" value="http://some-site/search?ho=t&l=fr-FR&q=[key]" name="custom_search_paths">
<label class="option tooltipstered" for="edit-custom-search-paths-test-frq-key">test site </label>

I know this was intentionnally modified in Bootstrap v3 but I really need to put the label after the input so I can use pure css (no js) to display my radio buttons as tabs ('hide' the radio buttons and apply a class to the current label based on the pseudoclass :checked).

This is what I want to achieve : http://alistapart.com/article/radio-controlled-web-design

I checked the form-element.func.php file but didn't know really what to do.

Is there a way to do that ? disable this new behaviour ?
Can you point me to the good direction please ?

Many thanks

Comments

coolidfrez created an issue. See original summary.

markhalliwell’s picture

Status: Active » Closed (won't fix)
benr’s picture

This might help: https://www.drupal.org/node/2292899

Copy bootstrap_form_element() in your subtheme (replace bootstrap with the name of your subtheme) and replace

$variables['#children'] = ' ' . $prefix . $element['#children'] . $suffix;

with

$output .= ' ' . $prefix . $element['#children'] . $suffix;
pringlz’s picture

Another solution for question "How to styling by css input radios inside the label?" For Bootstrap theme its problem))

sites/all/themes/bootstrap/templates/system/form-element-label.func.php

In lines with $output add to $title span tag line 70, 80, 89

<?php

/**
 * @file
 * Stub file for bootstrap_form_element_label().
 */

/**
 * Returns HTML for a form element label and required marker.
 *
 * Form element labels include the #title and a #required marker. The label is
 * associated with the element itself by the element #id. Labels may appear
 * before or after elements, depending on theme_form_element() and
 * #title_display.
 *
 * This function will not be called for elements with no labels, depending on
 * #title_display. For elements that have an empty #title and are not required,
 * this function will output no label (''). For required elements that have an
 * empty #title, this will output the required marker alone within the label.
 * The label will use the #id to associate the marker with the field that is
 * required. That is especially important for screenreader users to know
 * which field is required.
 *
 * @param array $variables
 *   An associative array containing:
 *   - element: An associative array containing the properties of the element.
 *     Properties used: #required, #title, #id, #value, #description.
 *
 * @return string
 *   The constructed HTML.
 *
 * @see theme_form_element_label()
 *
 * @ingroup theme_functions
 */
function bootstrap_form_element_label(&$variables) {
  $element = $variables['element'];

  // Extract variables.
  $output = '';
  $title = isset($element['#title']) ? filter_xss_admin($element['#title']) . ' ' : '';
  if ($title && ($required = !empty($element['#required']) ? theme('form_required_marker', array('element' => $element)) : '')) {
    $title .= $required;
  }
  //$title = '<span>' . $title . '</span>';
  $display = isset($element['#title_display']) ? $element['#title_display'] : 'before';
  $type = !empty($element['#type']) ? $element['#type'] : FALSE;
  $checkbox = $type && $type === 'checkbox';
  $radio = $type && $type === 'radio';

  // Immediately return if the element is not a checkbox or radio and there is
  // no label to be rendered.
  if (!$checkbox && !$radio && ($display === 'none' || !$title)) {
    return '';
  }

  // Retrieve the label attributes array.
  $attributes = &_bootstrap_get_attributes($element, 'label_attributes');

  // Add Bootstrap label class.
  $attributes['class'][] = 'control-label';

  // Add the necessary 'for' attribute if the element ID exists.
  if (!empty($element['#id'])) {
    $attributes['for'] = $element['#id'];
  }

  // Checkboxes and radios must construct the label differently.
  if ($checkbox || $radio) {
    if ($display === 'before') {
      $output .= '<span>' . $title . '</span>';
    }
    elseif ($display === 'none' || $display === 'invisible') {
      $output .= '<span class="element-invisible">' . $title . '</span>';
    }
    // Inject the rendered checkbox or radio element inside the label.
    if (!empty($element['#children'])) {
      $output .= $element['#children'];
    }
    if ($display === 'after') {
      $output .= '<span>' . $title . '</span>';
    }
  }
  // Otherwise, just render the title as the label.
  else {
    // Show label only to screen readers to avoid disruption in visual flows.
    if ($display === 'invisible') {
      $attributes['class'][] = 'element-invisible';
    }
    $output .= '<span>' . $title . '</span>';
  }

  // The leading whitespace helps visually separate fields from inline labels.
  return ' <label' . drupal_attributes($attributes) . '>' . $output . "</label>\n";
}

?>
meles’s picture

If you want to get results like this:
http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/
work for checkbox and radio
(Need module: Font Awesome)
It would be correct to do so in template.php:

function YOUTHEMENAME_form_element_label(&$variables) {
  $element = $variables['element'];
  $output = '';
  $output2 = '';
  $title = isset($element['#title']) ? filter_xss_admin($element['#title']) . ' ' : '';
  if ($title && ($required = !empty($element['#required']) ? theme('form_required_marker', array('element' => $element)) : '')) {
    $title .= $required;
  }
  $display = isset($element['#title_display']) ? $element['#title_display'] : 'before';
  $type = !empty($element['#type']) ? $element['#type'] : FALSE;
  $checkbox = $type && $type === 'checkbox';
  $radio = $type && $type === 'radio';
  if (!$checkbox && !$radio && ($display === 'none' || !$title)) {
    return '';
  }
  $attributes = &_bootstrap_get_attributes($element, 'label_attributes');
  $attributes['class'][] = 'control-label';
  if (!empty($element['#id'])) {
    $attributes['for'] = $element['#id'];
  }
  if ($checkbox || $radio) {
    if ($display === 'before') {
      $output .= $title;
    }
    elseif ($display === 'none' || $display === 'invisible') {
      $output .= '<span class="element-invisible">' . $title . '</span>';
    }
    if (!empty($element['#children'])) {
      $output2 .= $element['#children'];
    }
    if ($display === 'after') {
      $output .= $title;
    }
  }
  else {
    if ($display === 'invisible') {
      $attributes['class'][] = 'element-invisible';
    }
    $output .= $title;
  }
  return $output2 . '<label' . drupal_attributes($attributes) . '>' . $output . "</label>\n";
}
philsward’s picture

Thanks @5xMELESx Seems to work out all right.

Katy Jockelson’s picture

Thank you xMELESx - this was what I needed.