How to visualize a form with different themes in one template in symfony 2

Question

I want to customize form rendering in symfony. I checked the docs and found out that you can set a theme for rendering with the {{ form_theme }} tag. This works fine if there is only one form at a time, but if you have multiple forms in the same template, this does not work.

A simple example from my index.html.twig

 {% extends 'base.html.twig' %} {% block body %} <h1>Hello Form 1</h1> {% form_theme form1 'bootstrap_3_layout.html.twig' %} {{ form_start( form1 ) }} {{ form_end( form1 ) }} <h1>Hello Form 2</h1> {% form_theme form2 'bootstrap_3_horizontal_layout.html.twig' %} {{ form_start( form2 ) }} {{ form_end( form2 ) }} {% endblock %} 

As you can see, there are two form variables, and I want form1 to form1 displayed using 'bootstrap_3_layout.html.twig' and form2 using 'bootstrap_3_horizontal_layout.html.twig' . I do not know the internal elements of Twig, but I think that themes override their block definitions.

The result is as follows

So my questions are: how can I visualize forms with given themes without interfering with each other. Is there a way to render the form in a separate clean process?

I tried the Twig extension with a custom function, but it seems the function uses the same Twig_Environment. I also tried a sub request with {% render}%, but that also does not work.

Answer 1

Twig Solution

If you want to use the horizontal class for the form, you can add it to form_start() :

 {% extends 'base.html.twig' %} {% block body %} <h1>Hello Form 1</h1> {% form_theme form1 'bootstrap_3_layout.html.twig' %} {{ form_start( form1 ) }} {{ form_end( form1 ) }} <h1>Hello Form 2</h1> {% form_theme form2 'bootstrap_3_horizontal_layout.html.twig' %} {{ form_start(form2, {'class': 'horizontal', 'attr': {'class': 'horizontal'}}) }} {{ form_end( form2 ) }} {% endblock %} 

Thnaks to Ahmed Xiuani for the answer.

HTML + CSS Solution

I suggest you attach each Twig tag {{ form() }} in the <div> to the class, this will allow you to add specific CSS rules. See the example below:

 /* display the <label> in div.form_1 as red */ div.form_1 label { color: Red; } /* Email field in div.form_2 will only have a width of 50% */ div.form_2 input[type=email] { width: 50%; } /* Password field in div.form_2 will have a left margin and will be narrower */ div.form_2 input[type=password] { margin-left: 5em; width: 30%; } 

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="well"> <h2>Default form</h2> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> </form> </div> <div class="form_1 well"> <h2>Form 1</h2> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> </form> </div> <div class="form_2 well"> <h2>Form 2</h2> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> </form> </div> 

Answer 2

Your code works fine in my test.

You are probably submitting the same form type for form1 and form2 that are causing the problem. If you submit 2 different types of forms, they should work.