how to change the size of an exposed filter autocomplete form?

Question

the source shows:

<input id="edit-field-location-taxonomize-terms-tid" class="form-text form-autocomplete ctools-auto-submit-processed" type="text" maxlength="128" size="60" value="Germany" name="field_location_taxonomize_terms_tid" autocomplete="OFF" aria-autocomplete="list">

tried hook_form_alter but didn't find size or maxlength using drupal_set_message('<pre>' . print_r($form, TRUE) . '</pre>');

also

function modulename_element_info() {
  $types['textfield'] = array(
    '#input' => TRUE,
    '#size' => 20,
    '#maxlength' => 128,
    '#autocomplete_path' => FALSE,
    '#process' => array('ajax_process_form'),
    '#theme' => 'textfield',
    '#theme_wrappers' => array('form_element'),
  );
}

didn't work and don't know if/how i can change the size with css.

any help is appreciated. thanks a lot!

Answer 1

There is currently an issue in the Claro theme to reduce the exposed filter size but until then you can use this. Replace MYMODULE, MYVIEWID, and MYBLOCK. Haven't test this but it should work. I know its a lot of code for a small change. You could also do this with CSS. Oh you also have the change uid in the form variable.

/**
 * Implements hook_form_BASE_FORM_ID_alter().
 */
function MYMODULE_form_views_exposed_form_alter(&$form, FormStateInterface $form_state, $form_id) {
   if ($form_state->getStorage()) {
     $storage = $form_state->getStorage();
     if ($storage['view'] {
       if ($storage['view']->id() == 'MYVIEWID' && $storage['display']['id'] == 'MYBLOCK') {
         // Reduce the size of the input.
         $form['uid']['#size'] = 20;
       }
     }
   }
 }

With CSS. Change #EXPOSEDFILTERID. I chose data-drupal-selector because after submitting the form, the ID changes. You should also change uid.

#EXPOSEDFILTERID input[data-drupal-selector="edit-uid"]{
  width:150px;
}