Testing the theme with better exposed filters, and the checkboxes are all following the style rules for .form-control

Not critical, but wondering if the boostrap maintainers are interested in accommodating this out of the box?

Screenshot attached.

bef rendering of checkboxes

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

stephen Piscura’s picture

Was just about to post this feature request!

ChristianAdamski’s picture

Issue summary: View changes

Look at bootstrap/theme/process.inc at function _bootstrap_process_input and comment out or remove the 'select' in there.

Not writing a patch, as this seems to have changed in -dev.

evtm’s picture

Still doesn't work. Running the latest Beta II of Bootstrap theme and the dev of BEF.

Any fix for this?

Ruslan Piskarov’s picture

Hot fix on JS side:

    Drupal.behaviors.BefFix = {
        attach: function (context, settings) {
            var views_exposed_form = $('.views-exposed-form', context);

            views_exposed_form.hide();
            views_exposed_form.find('.form-control').not('.form-text, .form-select').removeClass('form-control');
            views_exposed_form.show();
        }
    };
rcodina’s picture

Solution on #4 worked for me. However, it took me a while to figure out how to use it to solve bootstrap theming bugs with it. This is the reason why I have created a small custom module using code on #4 and uploaded it to github:

https://github.com/rogercodina/bef_bootstrap_fix

I hope this can help somebody else. Thank you so much Ruslan Piskarev!

EricRondo’s picture

Sorry I am not very familiar with patches but i ended up with the following solution in better_exposed_filters/better_exposed_filters.theme :

if (($key = array_search('form-control', $element['#attributes']['class'])) !== false) {
  unset($element['#attributes']['class'][$key]);
}

inserted between lines 147-148 (theme_select_as_checkboxes()) and between lines 653-654 (bef_checkbox()).

Hope this can help anybody !

cmonnow’s picture

If theme_bef_checkbox() was introduced as discussed in https://www.drupal.org/node/1404656 then @EricRondo's solution can be cleanly implemented as an override in one's theme rather than having to hard code this change (and many others) within the BEF module.

At least for now you can override classes for the parent element using yourtheme_preprocess_select_as_checkboxes() within your theme.

function yourtheme_preprocess_select_as_checkboxes(&$variables) {
	$element = &$variables['element'];
	//Remove form-control class added to original "select" element
	if (($key = array_search('form-control', $element['#attributes']['class'])) !== false) {
		unset($element['#attributes']['class'][$key]);
	}	
}
markhalliwell’s picture

Version: 7.x-3.x-dev » 7.x-4.x-dev
Status: Active » Postponed

Not critical, but wondering if the boostrap maintainers are interested in accommodating this out of the box?

Not particularly, no. We cannot continue adding support for every single module that decides to do things just a bit differently. However, I won't say a definite "no" as this may be something that could be added later down the road if there were a decent and comprehensive enough of a patch submitted.

cmonnow’s picture

Forgot to update my comment. BEF module hacks are no longer necessary as theme_bef_checkbox() was recently added ( i.e. @EricRondo's hack can now be performed in the theme).

stefan93’s picture

thanks @ChristianAdamski it works for me

ryan_neff’s picture

Thanks @cmonnow - that example was excellent, it worked for me.

pringlz’s picture

Forgot to update my comment. BEF module hacks are no longer necessary as theme_bef_checkbox() was recently added ( i.e. @EricRondo's hack can now be performed in the theme).

Hello all!) It was better solution and I don't understand why nobody of maintainers don't add this to BEF module?
Here very small module of cmonnow with small js fix. https://github.com/rogercodina/bef_bootstrap_fix

Please, add this fix to module!

entropea’s picture

Yep the https://github.com/rogercodina/bef_bootstrap_fix module works a treat. Thanks @rcodina

montesajudy’s picture

#5 worked like magic! Thank you @rcodina

carlovdb’s picture

#5 worked perfect for me!

meles’s picture

Better way for fix it(add in template.php):

/**
 * Implements hook_pre_render().
 */
function YOURTHEMENAME_pre_render($element) {
// Array of element name
$names = array(
  'field_TESTCONTENT_category_value',
  );

  if ($element['#type'] == 'select') {
// Uncomment dsm() for show all $element['#type'] 'select'
// and find $element['#name'] for array $names.
// For dsm() need module Delev (https://www.drupal.org/project/devel)
// dsm($element);

    if ($name = !empty($element['#name']) ? $element['#name'] : FALSE) {
      if (in_array($name, $names) && ($key = array_search('form-control', $element['#attributes']['class'])) !== false){
        unset($element['#attributes']['class'][$key]);
      }
    }
  }
return $element;
}
meles’s picture

Testing on collapse all work excellent!
Modules: Views + Panels + BEF
Better way for fix it(add in template.php):

/**
 * Implements hook_theme().
 */
function YOURTHEMENAME_theme($existing, $type, $theme, $path) {
    return array(
    'bootstrapfix_select_as_checkboxes_fieldset' => array(
      'function' => 'theme_bootstrapfix_select_as_checkboxes_fieldset',
      'render element' => 'element',
    ),
  );
}

/**
 * Implements hook_pre_render().
 */
function YOURTHEMENAME_pre_render($element) {
// Array of element name
$names = array(
  'field_TESTCONTENT_category_value',
  );

  if ($element['#type'] == 'select') {
// Uncomment dsm() for show all $element['#type'] 'select'
// and find $element['#name'] for array $names.
// For dsm() need module Devel (https://www.drupal.org/project/devel)
// dsm($element);

    if ($name = !empty($element['#name']) ? $element['#name'] : FALSE) {
      if (in_array($name, $names) && ($key = array_search('form-control', $element['#attributes']['class'])) !== FALSE){
        unset($element['#attributes']['class'][$key]);
        $element['#theme'] = 'bootstrapfix_select_as_checkboxes_fieldset';
      }
    }
  }
return $element;
}

function theme_bootstrapfix_select_as_checkboxes_fieldset($vars) {
   $element = array_merge(
    array(
      '#bef_title' => '',
      '#bef_description' => '',
      '#bef_operator' => array(),
    ),
    $vars['element']
  );

  $fieldset = array(
    '#title' => '<a href="#' . $element['#name'] . '" data-toggle="collapse">' . $element['#bef_title'] . '</a>',
    '#description' => $element['#bef_description'],
    '#attributes' => array(
      'class' => array(
        'bef-select-as-checkboxes-fieldset',
        'collapsible',
      ),
    ),
  );
  if (empty($element['#value'])) {
    // Using the FAPI #collapsible and #collapsed attribute doesn't work here
    // TODO: not sure why...
    $fieldset['#attributes']['class'][] = 'collapsed';
  }

  // We rendered the description as part of the fieldset element, don't render
  // it again along with the checkboxes.
  unset($element['#bef_description']);

  $children = '';
  if (!empty($element['#bef_operator'])) {
    // Put an exposed operator inside the fieldset.
    $children = drupal_render($element['#bef_operator']);
  }

  // Render the checkboxes.
  $checkboxes = theme('select_as_checkboxes', array('element' => $element));
  $patterns = '/class="form-checkboxes /';
  if (!empty($element['#bef_title'])) {
    $replace = 'id="' . $element['#name'] . '" class="form-checkboxes collapse ';
  } else {
    $replace = 'id="' . $element['#name'] . '" class="form-checkboxes ';
  }
  $children .= preg_replace($patterns, $replace, $checkboxes);
  $fieldset['#children'] = $children;
  return theme('fieldset', array('element' => $fieldset));
}
markhalliwell’s picture

Version: 7.x-4.x-dev » 8.x-4.x-dev
Issue tags: +Needs backport to D7

Changing to proper branch version for #2554199: Bootstrap 4.

thelinhuk’s picture

#17 Works great . Thanks xMELESx. I also add extra js to remove collapsible class make it look better

 $('#field-name-wrapper fieldset').removeClass('collapsed');
mitche42’s picture

How can #17 be adapted to work with 7.x? (It didn't work for me, (checkboxes and labels disappeared))

Or is there a way to get #5 to respect the collapsible option? (It did work for me, but doesn't collapse)

Katy Jockelson’s picture

Thanks Ruslan P and rcordina, #5 saved me a load of faffing with CSS :)

nithinkolekar’s picture

as per the http://getbootstrap.com/docs/4.0/components/forms/

Form controls

Textual form controls—like <input>s, <select>s, and <textarea>s—are styled with the .form-control class. Included are styles for general appearance, focus state, sizing, and more.

Isn't that mean there is no need of form-control class for form components other than mentioned above?

sano’s picture

I tried the module at #5 and it worked - cleaned-up the check boxes - but did not make the fields collapsible. The #17 worked nicely for both - cleaning the arrangement of check boxes while making the controls collapsible. Besides renaming the hook functions to reflect the module name it is also necessary to populate the $names array in the hook_pre_render function with the names of the controls in the exposed form. I tested this in drupal 7 (to answer question from @mitche42). Thanks @xMELESx.

Katy Jockelson’s picture

@sano - like you, I need both the tidying of the select elements rendered as checkboxes, and also for the collapsible feature to work.
I have the code from #17 in my template.php file and I have changed the theme name, but I am not sure what to put in the $names array - can you help at all?
Also, can you confirm that the code in #17 works on its own and you don't also need the module in #5?
TIA

sano’s picture

Hi Katy, I think I am not using any of these solutions - I do not remember why any more :-(

...but to answer your question: the item in the array - like the 'field_TESTCONTENT_category_value' - stands for the name of the field in the exposed filter - if I remember correctly. It is the last item in the link that you get when right-clicking the exposed filter in the view. In this example the array item would be "field_region_nr_target_id":

https://nabezky.sk/en/admin/structure/views/nojs/config-item/frontpage/d...

by the way, this is what I ended up with: https://nabezky.sk - see the Custom item in the submenu

shelane’s picture

Status: Postponed » Closed (won't fix)

This theme will not be supported for Bootstrap 4. See alternative themes for this support.