i need a hand about this particular (tricky) subject about Drupal 8. How to alter form in such way to remove those annoying fieldsets wrapping everything: radios buttons, checkboxes, addressField .. ? if possible globally, not necessarily addressing a particular fieldset in particular form.

Drupal 8, by its default internal process of rendering Forms, use (unnecessary) many nested containers to wrap and structure from elements which absolutely makes the html output little bit complicated when it comes to work with css frameworks (Bootstrap 4 in my case)

for e.g: let say, in the default contact form, we add a new field called title with those options (Sir, Miss, Dr. ..) so the internal Drupal rendering engine will :

  1. create a form-element (form-element.html.twig.) to hold each label and radio input together,
  2. then wraps all options with radios container (radios.html.twig),
  3. and finally wrap all elements in a fieldset (fieldset.html.twig)

3 levels of nesting containers ! this is drupal jungle, i feel myself wasting much time just to adapt the drupal default html output to fit the one of Bootstrap 4, i'm not really doing something useful at all.

i already spent a lot of time reading docs, i even tried hook_field_widget_form_alter but didn't work (it seems there's a core issue as per my searches) i looked at forums and it's clearly a frequent asked topic but no really definitive answer found out there.

that said, i'm looking for the right drupal's way solution and leaving untouched the fieldset.html.twig and replace it if necessary, with an other one bootstrap card, it does make more sens to me.

i really appreciate you kind help.

Comments

cizario’s picture

i'm not really sure, but hook_field_widget_form_alter seems to be the hook to go with as per this tutorial

https://3cwebservices.com/drupal/how-remove-fieldset-drupal-address-field