By default the search_block_form label is hidden, so I used hook_form_alter to override the setting - $form['search_block_form']['#title_display'] = 'before';

Class 'compact-form' is added to the form but class 'compact-form-label' is not added to the label and 'compact-form-field' is not added to input.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Dentorat’s picture

Any follow up information on this, I am having the same issue. Thanks

-Tomas

BWPanda’s picture

See if the patch here helps: #1890816: Automatically show hidden labels

Baysaa’s picture

Having exact same issue as the OP describes. compact-form class is added to the form but the label and input don't get the correct classes added to them.

I've used the following hook_form_alter to show the label.

/**
 * Implementation of hook_form_alter()
 */
function hook_form_alter(&$form, &$form_state, $form_id) {
  switch ($form_id) {
    case 'search_block_form':
      // Enable the display of label
      $form['search_block_form']['#title_display'] = 'before';
      // Hide search button
      $form['actions']['submit']['#access'] = FALSE;
      break;
  }
}

And added 'search-block-form' into the CSS id's of compact forms.

Compact forms version: 7.x-1.0
Drupal version: 7.17
JS console shows 0 JS errors.

My label doesn't have element-invisible class so the patch in #2 is non-applicable to my case, nor the OP's.

The weird thing is I have another website on the same local dev server, and that website has the exact same module version and drupal version, and the compact forms works on there. I'm scratching my head trying to figure out why.
------
Edit:
As mentioned before I have another website with working compacted search block form. The only difference I can see between them is the one that's NOT working has an input type="search" while the one working has input type="text". I've inspected the compact_forms.js file and it's indeed checking if $field.is('input:text,input:password,textarea') so type="search" would not get compacted.

I'm quite positive it's theme related, as the one that has type="text" is Omega xhtml sub theme. And the one that's not working is using AdaptiveTheme. I've found the following preprocess in adaptivetheme's at_core (file: sites/all/themes/adaptivetheme/at_core/inc/preprocess.inc line 790):

/**
 * Preprocess variables for the search block form.
 */
function adaptivetheme_preprocess_search_block_form(&$vars) {
  // Changes the search form to use the "search" input element attribute (HTML5)
  // We have to replace the string because FAPI don't know what type=search is, i.e.
  // no way we can do this in a form alter hook.
  $vars['search_form'] = str_replace('type="text"', 'type="search"', $vars['search_form']);
}

Which changes the type from "text" to "search". If you use the same preprocess in your sub-theme and reverse the change it should work:

/**
 * Preprocess variables for the search block form. Reverse the change made by
 * at_core to change search form's input type from "text" to "search"
 */
function THEME_preprocess_search_block_form(&$vars) {
  $vars['search_form'] = str_replace('type="search"', 'type="text"', $vars['search_form']);
}

OR you can always patch compact_forms.js line 23 to:

if (!$field.length || !$field.is('input:text,input:password,textarea,input[type=search]')) {

Which equally works.

rafayama’s picture

I used the search block form alter to remove the 'element-invisible' class, but the compact forms is not applying 'compact-form-label' and 'compact-form-field compact-form' classes to label and field in internal pages only. If I remove with jquery, it also does not work in internal pages. In the home page, it works fine (and yes, the form has the same ID).
I'm using zen theme, core 7.19, and compact forms 7.x-1.0. By the way, my search field type is 'text'.

[FIXED]

cameron prince’s picture

Here is a patch for the fix posted in #3 (compact_forms.js modification).