CSS for Symfony2 forms: “Hello World” equivalent

Question

How to alter the fields.html.twig template? I am only looking for the "hello world" equivalent to see the first ever change to the form.

What's working (within a bundle view as add.Article.html.twig):

         <div class="well;">
              <form method="post" {{ form_enctype(form) }}>
                 {{ form_widget(form,{attr: {class:'test'}} ) }}
                 <input type="submit" class="btn btn-primary" />
              </form>
         </div>

The test class is only doing a CSS .test{background-color:grey;}. I am normally using Bootstrap.

---

In fields.html.twig I have:

    {% block aliquam_input %}
    {% spaceless %}
      <div>
        {{ form_label(form) }}
        {{ form_errors(form) }}
        {{ form_widget(form, { 'attr': {'class': 'test'} }) }}
      </div>
    {% endspaceless %}
    {% endblock %}

and in app/config/config.yml:

   # Twig Configuration
   twig:
   //..
     form:
        resources:
            - 'AliquamSummaryBundle:Form:fields.html.twig'

The fields.html.twig is rendered ok to the main twig as I get an error when removing one of the hash in the fields twig.

---

What's not working (ie class test doesn't show) is when I try to make the fields.html.twig take effect on Article.html.twig:

   {% block aliquam_input %}
   {% spaceless %}
    <div class="well;">
        <form method="post" {{ form_enctype(form) }}>
            {{ form_widget(form) }}
            <input type="submit" class="btn btn-primary" />
        </form>
    </div>
   {% endspaceless %}
   {% endblock %}

As all forms will have the same format, I'd prefer to not set all html attributes to every single line. But what is the way to get the class "test" taking effect from the fields.html.twig template?

__ _ __ _ __ _ __ _ __ _ __ _ __ _ __ _ ___ Update for David __ _ __ _ __ _ ____ Thanks @David, but unfortunately adding the name as form.name doesn't change anything. The CSS attribute is still not transferred to the form in html. Well spot for the semicolon after well; it was a late night typo, but not related to the problem.

Here is what I have figured so far. I might have to end up having to enter bootstrap CSS to each individual row in a form (horrible thought) or figure how to do this by entities options, which comes almost to the same horrible thought as doing it for every row. Since the doc offers to enter a template for all forms via app/config/config.yml there should be a far simpler way, but I don't get it.

The below is the only direction so far which made CSS work a little, ie class .test{background-color: black;} is doing its job:

    {# ..\addArticle.html.twig #}

    <div class="well">
        <form method="post" {{ form_enctype(form) }}>
            {{ form_widget(form) }}
            <input type="submit" class="btn btn-primary" />
       </form>
     </div>

NB: there is no {% block .. %} around the div, which makes sense as I put the fields.html.twig to be included to the symphony standard widgets through app/config/config.yml. The above goes with the fields.html.twig below.

   {# ..\fields.html.twig #}

    {% block widget_attributes %}
    {% spaceless %}
          {{" class=\'test\'" }}
    {% endspaceless %}
    {% endblock widget_attributes %}

So far only fields with textarea show black color, bit it's kind of “hello world”. I am not sure if this is right way to proceed as I have not found anything alike in this and other forums and the doc only states to look at form_div_layout.html.twig on git to decide which attribute to change, which is not really helpful (to me).

Answer 1

First change your well; class to well in your add.Article.html.twig.

In order to put a class on your widget I think you can try

{{ form_widget(form.name, {'attr': {'class': 'test'}}) }}

The difference with your code is the form.name parameter. If you only give the form it will not apply passed options. See the doc

Answer 2

Changing the fields.html.twig as

    {# ..\fields.html.twig #}

      {% block widget_attributes %}
      {% spaceless %}
        {{" class=\'test\'" }}
      {% endspaceless %}
      {% endblock widget_attributes %}

is indeed correct in what concerns Symfony and the reason that with bootstrap-CSS only the textareas show the class="test" is that bootstrap assigns mandatorily (all other than textareas) with the bootstrap specific one. As I don't want to alter the bootstrap as such I ended up assigning the attributes per widget from within the entities - anything else would probably opening a can of worms.