0

I know how to add a class to a form element and how to add a form submission button, but there are classes that are automatically added to these buttons in my Drupal 8 install.

The form I am editing has two buttons, a submit and a skip button; both the buttons look the same. I would like to add a visual clue to the difference between the buttons. The buttons get an automatic btn-primary class but I want the skip button to have a btn-outline-primary class. If I add that class with '#attributes' => ['class' => ['btn-outline-primary']], the class gets added, but the btn-primary class is still part of the button. The combination of those two classes makes the button text the same color as the button background color, and thus invisible unless you hover over the button.

Is there a way to perhaps not include the button in the template, for example {{ form.actions.skip }} but more verbose? In the sense that takes over some of the Drupal 8 automation?

<button class="btn btn-outline-primary">{{from.actions.skip.something}}</button>
7
  • Maybe something like {{ attribute.removeClass('btn-primary') }} instead?
    – Hudri
    Oct 27 '20 at 16:03
  • 1
    why don't you just override the text (or background) color in your own css ?
    – MacSim
    Oct 27 '20 at 16:08
  • I think an important detail you need to know is which code is adding the class btn-primary. Possibly a base theme. Then you could implement your own hook to remove the class again.
    – 4k4
    Oct 27 '20 at 16:11
  • @Hudri, should that then be {{ form.actions.skip.attribute.removeClass('btn-primary') }}? Because that doesn't work The button is gone If I try that.. Oct 27 '20 at 16:11
  • @4k4 Using a hook to remove the class will affect all the buttons, I am not sure he will be able to add an id and target it in the hook to remove the class for that id only
    – MacSim
    Oct 27 '20 at 16:34
0

There are two basic ways in Drupal to remove the class, a PHP hook or a Twig template. It's only possible to describe this in a general way because the question doesn't contain details about which theme and templates are in use.

For a PHP solution find out which hook is adding this class and then implement the same hook in your custom theme. If the attributes contain the specific class you've added to the form build, then remove the conflicting class.

For a Twig solution enable Twig debug, find out which template is rendering the button now, and copy it to your theme's templates folder. Then do the same thing as described before in Twig:

{% if attributes.hasClass('btn-outline-primary') %}
  <input{{ attributes.removeClass('btn-primary') }} />{{ children }}
{% else %}
  <input{{ attributes }} />{{ children }}
{% endif %}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.