CODEWITHSUNDEEP
symfonysymfony-forms
JayKey
JayKey

Reputation: 176

How to style Symfony2 form prototype

I have a collection of form in Symfony2. I need to style those forms with some specific div structure, something like this:

<div class="block" style="clear: both;">
  {{ form_row(form.name) }}
  {{ form_row(form.address) }}
</div>
<div class="block">
  {{ form_row(form.website) }}
  {{ form_row(form.email) }}
</div>
<div>
 <div>
   {{ form_row(form.text1) }}
 </div>
</div>

As you can see, the structure is not regular and I don't have an idea how to style it in the {% for row in rows %} loop in {% block collection_widget %}. Any ideas how I can style/build form prototype so the form added with javascript will look exact as I want?

Upvotes: 0

Views: 557

Answers (2)

qooplmao
qooplmao

Reputation: 17759

I've found the best way is to have separate twig template for the form and then pass the form/prototype into that like..

_form.html.twig

<div class="block" style="clear: both;">
    {{ form_row(form.name) }}
    {{ form_row(form.address) }}
</div>
<div class="block">
    {{ form_row(form.website) }}
    {{ form_row(form.email) }}
</div>
<div>
    <div>
        {{ form_row(form.text1) }}
    </div>
</div>

update.html.twig

<ul data-prototype="{{ include('_form.html.twig', 
                                {'form': form.items.vars.prototype })|e }}">
    {% for item in form.items %}
        <li>{{ include('_form.html.twig', {'form': item }) }}</li>
    {% endfor %}
</ul>

This will allow you to pass in your form items prototype into the same template that you are using for your actual form items, meaning that you only have to update one template when things change.

Upvotes: 2

Martin Fasani
Martin Fasani

Reputation: 823

You can do it with a simple for loop in twig, without extending the {% block collection_widget %}:

{% for counter in form.MyCollection %}
<div class="block" style="clear: both;">
  {{ form_row(form.MyCollection[loop.index0].name) }}
  {{ form_row(form.MyCollection[loop.index0].address) }}
</div>
<div class="block">
  {{ form_row(form.MyCollection[loop.index0].website) }}
  {{ form_row(form.MyCollection[loop.index0].email) }}
</div>
<div>
 <div>
   {{ form_row(form.MyCollection[loop.index0].text1) }}
 </div>
</div>
{% endfor %}

Upvotes: 0

Related Questions