it-swarm.it

Cambia classe sul wrapper div di un elemento modulo

C'è un modo per aggiungere o modificare una classe in un wrapper di modulo (i div) usando il modulo api?

O è stato appena fatto con la funzione tema?

In tal caso, quale funzione del tema viene utilizzata per cambiarlo?

11
chrisjlee

Puoi sovrascrivere theme_form_element() normalmente se vuoi cambiare il tema a livello globale. Se sei interessato a modificare solo un elemento del modulo specifico, sono consapevole di un paio di scelte.

  1. Puoi registrare una nuova funzione tema per il tipo particolare di elemento del modulo che ti interessa (es. Campo di testo). Quindi crei questa funzione tema (basata sull'originale, ad es. theme_textfield() ) ma che alla fine non chiama theme('form_element', ...) (puoi gestire sia il wrapper che l'elemento nell'unica funzione del tema, oppure potresti creare una funzione del tema del wrapper separata e usarla). Infine aggiungi una proprietà #theme A un particolare elemento del modulo e quell'elemento otterrà il tuo tema personalizzato.

  2. È possibile creare un file modello chiamato form_element.tpl.php Che ha solo il comportamento predefinito di theme_form_element() e quindi utilizzare hook_preprocess_form_element() per aggiungere un suggerimento modello. Quindi si crea il nuovo modello che corrisponde al suggerimento. Senti spesso le persone che menzionano che i modelli sono leggermente più lenti delle funzioni e, per una chiamata a tema così frequentemente usata, posso immaginare che le persone si stancino di usare un modello. Tuttavia, non ho mai effettuato alcuna misurazione per questo. Inoltre, è necessario disporre di un contesto sufficiente nella fase di preelaborazione per poter fornire il suggerimento.

5
Andy

So che questo è un thread molto vecchio, ma ho imparato a modificare gli elementi del modulo e ad aggiungere classi. Ho cercato di creare un modulo personalizzato:

function yourtheme_custom_form_alter(&$form, &$form_state, $form_id) {
 case'webform_number_whatever':
   _yourtheme_form_add_wrapper($form['submitted']['yourfieldhere'], array('form-field-some-style', 'not-label', 'whatever-other-styles-you-want'));
 break;
}

function _yourtheme_form_add_wrapper(&$element, $classes = array(), $type = array('form-item', 'form-type-textfield'), $removeTitle = FALSE){
  $element['#prefix'] = '<div class="' . implode(" ", $classes) . '"><div class="' . implode(" ", $type) . '">';
  $element['#suffix'] = '</div></div>';
}
4
tdm

Per cambiare il "wrapper" devi sovrascrivere form_element. Fondamentalmente tutti gli elementi del modulo vengono resi con il tema form_element theme_form_element($element,$value); (file form.inc)

Quindi, per cambiare il modo in cui questo rende gli elementi del tuo modulo, devi semplicemente copiare quella funzione nella cartella template.php e rinominarla in: phptemplate_form_element($element,$value)

ora puoi apportare eventuali modifiche e verranno utilizzate al posto della funzione originale

  1. Copia theme_form_element($element,$value); da form.inc
  2. Incollalo in (il tuo tema) template.php
  3. rinominalo in: phptemplate_form_element($element,$value)
  4. svuota tutta la cache dei temi
  5. apporta le modifiche che desideri e verranno utilizzate.
3
Andre

Puoi usare wrapper_attributes proprietà.

$form['example'] = [
  '#type' => 'textfield',
  '#title' => $this->t('Example'),
  '#wrapper_attributes' => ['class' => ['wrapper-class']],
];
1
ya.teck

È importante sottolineare che theme_form_element modificherà solo il div del wrapper parent diretto e questo potrebbe non essere l'obiettivo previsto per gli effetti CSS.

[Sebbene non sia programmatico, se si desidera semplicemente applicare una classe al top-wrapper di un campo nodo (è wrapper, wrapper, wrapper) si può supporre che si usi il modulo "Gruppo di campi" selezionando "Gestisci campi" per un particolare tipo di contenuto e seleziona "Aggiungi nuovo gruppo" come semplice DIV. Quindi l'etichetta può essere rimossa e le classi desiderate assegnate al wrapper aggiuntivo (ma ora abbiamo ancora più wrapper) - con annidamento illimitato]

0
user24737

Rendi configurabili gli attributi wrapper!

Crea la tua funzione tema elemento forma nel tuo tema ... sites/all/themes/MY_THEME/theme/form-element.theme.inc

function my_theme_form_element($variables) {
  $element = &$variables['element'];

  $attributes = isset($element['#my_theme_wrapper_attributes']) ?
    $element['#my_theme_wrapper_attributes'] : array();

  ...

  $output = '<div' . drupal_attributes($attributes) . '>' . "\n";

  ...
}

Quindi puoi fare cose come questa ...

function my_module_form_alter(&$form, &$form_state, $form_id) {
  $form['account']['mail']['#my_theme_wrapper_attributes']['class'][] = 'form-field--inline';
}
0
doublejosh

Ci sono casi in cui né #prefix/#suffix#attributes => array('class') danno i risultati desiderati. Il mio caso particolare è l'aggiunta di una classe al div ajax-wrapper attorno a un elemento managed_file. #prefix/#suffix Crea un nuovo contenitore e #attributes/'class' Modifica la classe di un elemento interno, non quella più esterna.

Il div più esterno normale è giusto

<div id="edit-doc1--XX-ajax-wrapper">

che è difficile scegliere come target nei CSS. Posso scegliere come target [id^="edit-doc"] O [id$="-ajax-wrapper"], Ma entrambi questi target sono più degli elementi che volevo.

La soluzione che mi è venuta in mente è quella di aggiungere un elemento #process al modulo e manipolare manualmente il codice dell'elemento. Ecco l'attributo #process Aggiunto alla dichiarazione dell'elemento del modulo:

$form['doc1'] = array(
  '#type' => 'managed_file',
  '#process' => array('mymodule_managed_file_process'),
);

Ed ecco la funzione mymodule_managed_file_process():

function mymodule_managed_file_process($element, &$form_state, $form) {

  // Call the original function to perform its processing.
  $element = file_managed_file_process($element, $form_state, $form);

  // Add our own class for theming.
  $element['#prefix'] = str_replace(
    'id=',
    'class="managed-file-wrapper" id=',
    $element['#prefix']
  );

  return $element;
}

Affidarsi alla sostituzione delle stringhe non è molto portatile, quindi utilizzare str_replace A proprio rischio. Questo codice, tuttavia, modifica effettivamente il DIV più esterno per aggiungere la classe necessaria:

<div class="managed-file-wrapper" id="edit-doc1--XX-ajax-wrapper">
0
Joseph Cheek

Puoi usare

'#prefix' => '<div class="new_class">', '#suffix' => '</div>'

e questo lo avvolgerà

0
Alex