Ändern Sie die Klasse im div-Wrapper eines Formularelements

Gibt es eine Möglichkeit, eine Klasse mithilfe der Formular-API zu einem Formular-Wrapper (den Divs) hinzuzufügen oder zu ändern?

Oder ist das nur mit der Theme-Funktion gemacht?

Wenn ja, welche Themenfunktion wird verwendet, um dies zu ändern?

Sie können theme_form_element()normal überschreiben , wenn Sie das Thema global ändern möchten. Wenn Sie nur ein bestimmtes Formularelement ändern möchten, stehen mir einige Optionen zur Verfügung.

1. Sie können eine neue Designfunktion für den bestimmten Typ des Formularelements registrieren, an dem Sie interessiert sind (z. B. Textfeld). Sie erstellen dann diese Designfunktion (basierend auf dem Original, z. B. theme_textfield()), die jedoch theme('form_element', ...)am Ende nicht aufgerufen wird (Sie können entweder sowohl den Wrapper als auch das Element in der einen Theme-Funktion behandeln oder eine separate Wrapper-Theme-Funktion erstellen und benutze das). Schließlich fügen Sie #themeeinem bestimmten Formularelement eine Eigenschaft hinzu, und dieses Element erhält Ihr benutzerdefiniertes Thema.

2. Sie können eine Vorlagendatei form_element.tpl.phpmit dem Standardverhalten erstellen theme_form_element()und dann hook_preprocess_form_element()einen Vorlagenvorschlag hinzufügen. Anschließend erstellen Sie die neue Vorlage, die dem Vorschlag entspricht. Man hört oft Leute erwähnen, dass Vorlagen etwas langsamer sind als Funktionen, und für einen so häufig verwendeten Themenaufruf kann ich mir vorstellen, dass Leute die Verwendung einer Vorlage ablehnen. Ich habe jedoch selbst nie irgendwelche Messungen dafür durchgeführt. Außerdem müssen Sie in der Vorverarbeitungsphase über genügend Kontext verfügen, um den Vorschlag machen zu können.

Ich weiß, dass dies ein super alter Thread ist, aber ich habe gelernt, wie man Formularelemente ändert und Klassen hinzufügt. Ich habe ein benutzerdefiniertes Modul erstellt:

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>';
}

Um den "Wrapper" zu ändern, müssen Sie form_element überschreiben. Grundsätzlich werden alle Formularelemente mit dem Thema theme_form_element($element,$value);form_element (form.inc-Datei) gerendert.

Um zu ändern, wie Ihre Formularelemente gerendert werden, kopieren Sie diese Funktion einfach in Ihren Ordner template.php und benennen sie um in: phptemplate_form_element($element,$value)

Jetzt können Sie Änderungen vornehmen und diese werden anstelle der ursprünglichen Funktion verwendet

1. Kopie theme_form_element($element,$value);aus form.inc
2. Fügen Sie es in (Ihr Thema) template.php ein
3. benenne es um in: phptemplate_form_element($element,$value)
4. Leeren Sie den gesamten Themen-Cache
5. Nehmen Sie die gewünschten Änderungen vor und sie werden verwendet.

Wichtig ist, dass theme_form_element nur das direkte übergeordnete Wrapper-Div ändert und dies möglicherweise nicht das beabsichtigte Ziel für CSS-Effekte ist.

[Obwohl nicht programmatisch, kann man, wenn man einfach eine Klasse auf den Top-Wrapper eines Knotenfelds anwenden möchte (Wrapper, Wrapper, Wrapper), das Modul "Feldgruppe" verwenden, indem man "Felder verwalten" für einen bestimmten Inhaltstyp und auswählt Wählen Sie "Neue Gruppe hinzufügen" als einfache DIV. Dann kann das Etikett entfernt und die gewünschten Klassen dem zusätzlichen Wrapper zugewiesen werden (aber jetzt haben wir noch mehr Wrapper) - mit unbegrenzter Verschachtelung]

Du könntest benutzen

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

und das wird es umwickeln

Machen Sie Wrapper-Attribute konfigurierbar!

Erstellen Sie Ihre eigene Formularelement-Themenfunktion in Ihrem Thema ... 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";

  ...
}

Dann kannst du solche Sachen machen ...

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

Es gibt Fälle, in denen weder #prefix/#suffixnoch #attributes => array('class')die gewünschten Ergebnisse erzielt werden. Mein spezieller Fall ist das Hinzufügen einer Klasse zum Ajax-Wrapper-Div um ein Managed_File-Element. #prefix/#suffixErstellt einen neuen Container und #attributes/'class'ändert die Klasse eines inneren Elements, nicht das äußerste.

Das normale äußerste div ist gerecht

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

Das ist in CSS schwer zu zielen. Ich kann zielen [id^="edit-doc"]oder [id$="-ajax-wrapper"]aber beide zielen mehr als nur auf die Elemente, die ich wollte.

Die Lösung, die ich gefunden habe, besteht darin , dem Formular ein #processElement hinzuzufügen und den Code des Elements manuell zu bearbeiten. Hier ist das #processAttribut, das der Deklaration des Formularelements hinzugefügt wurde:

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

Und hier ist die mymodule_managed_file_process()Funktion:

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;
}

Das Verlassen auf das Ersetzen von Zeichenfolgen ist nicht sehr portabel. Verwenden str_replaceSie es daher auf eigenes Risiko. Dieser Code ändert jedoch tatsächlich das äußerste DIV, um die erforderliche Klasse hinzuzufügen:

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

Sie können die Eigenschaft wrapper_attributes verwenden .

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

<?php
    $form['#attributes'] = array('class' => 'your-class-name');
?> 

Auf die oben beschriebene Weise können Sie dem Formularelement eine Klasse hinzufügen.