im trying to style my form a bit and came across this widget_tweaks. I installed it and now im able to access each form tag and give them css classes and so on but when I try to submit the form its not working. Like the page is just reloading but nothing happens... Do I have to rewrite the view or make some changes in the model? Hope somebody can help me.
{% load widget_tweaks %}
<form name="form" method='POST' enctype='multipart/form-data'>
{% csrf_token %}
{% for field in form %}
<div class="md-form-group float-label">
{% render_field field class="md-input" %}
<label>{{ field.label_tag }}</label>
</div>
{% endfor %}
<input type="submit" class="btn btn-default" value='Create Post' />
</form>
When I use the {{form}} everything works except tat I cannot style the tags...
Every comment is welcome.
If it works with {{ form }} it should also work with widget-tweaks without altering your view code.
Edit:
The correct way to add classes in widget_tweaks is:
{% render_field field_name class+="css_class_1 css_class_2" %}
Or
{{ form.field_name|add_class:"css_class_1 css_class_2" }}
And to be complete: you can show the errors by manually adding {{ field.errors }} for the fields you want to display error messages
Related
I'm using Django form and trying to loop through the fields in my template.
I did it like this:
<form method = "post">
<span>
{% for error in form.errors %}
<p>{{ error }}</p>
{% endfor %}
</span>
{% for field in form %}
<span>
{{ field.label_tag }}
</span>
<div>
{{ field }}
</div>
{% endfor %}
{% csrf_token %}
<button type = "submit">
</form>
However, when I did this, the error field shown in the template was displayed as "all".
Beside this everything's fine with this form.
I'm wondering what's going on.
Many thanks in advance!
Try using the form like this(remember to add the CSS):
<form method = "post">
{% csrf_token %}
{% for field in form %}
{{ field.label_tag }}
{{ field }}
{{field.errors.as_text|cut:'* '}}
{% endfor %}
<button type = "submit">
</form>
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 (i.e. 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, i.e. 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).
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
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.
Can someone help me to tranform this line:
<li>{{ form_row(form.features_reducing_value) }}</li>
to this or something like this :
<div id="dynamicInput">
Entry 1<br><input type="text" name="myInputs[]">
</div>
<input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
If I understood you correctly, you want to be able to clone your form fields. In Symfony this is done using form collections and embedding them with "prototype".
More information is here -> http://symfony.com/doc/master/cookbook/form/form_collections.html
for instance to override the <input type="number" /> you do like this:
{# src/Acme/DemoBundle/Resources/views/Form/fields.html.twig #}
{% block integer_widget %}
<div class="integer_widget">
{% set type = type|default('number') %}
{{ block('form_widget_simple') }}
</div>
{% endblock %}
And in your html.twig file you use the from_theme like this:
{% form_theme form 'AcmeDemoBundle:Form:fields.html.twig' %}
more information about that here
I'm using Symfony 2 form to create an expanded choice list using radio buttons for selecting whether to post a blog as an anonymous user or not anonymous (showing username).
The form field type definition in the BlogType.php file looks like the following (I'm passing the choices with their values from the controller, but it should be irrelevant to my question):
$builder->add('is_anonymous', 'choice', array(
'choices' => $options['is_anonymous'],
'required' => true,
'multiple' => false,
'expanded' => true,
));
I tried to apply the "How to customize an Individual field" section from the Symfony2 Cookbook by doing the following in my template twig file:
<div class="post_as">
{{ form_label(form.is_anonymous, 'Post as:') }}
{{ form_errors(form.is_anonymous) }}
{% form_theme form _self %}
{% block _factor_is_anonymous_0_label %}
<img src="/images/anonymous-32.png"/>
{{ block ('form_label') }}
{% endblock %}
{% block _factor_is_anonymous_1_label %}
<img src="/images/user-32.png"/>
{{ block ('form_label') }}
{% endblock %}
{{ form_widget(form.is_anonymous) }}
</div>
However, the above results in both images showing before the choice list in addition to each showing next to its corresponding radio button, as seen in the resulting html:
<div class="post_as">
<label class="required">Post as:</label>
<img src="/images/anonymous-32.png"/>
<img src="/images/user-32.png"/>
<div id="factor_is_anonymous">
<input type="radio" id="factor_is_anonymous_0" name="factor[is_anonymous]" required="required" value="true" />
<img src="/images/anonymous-32.png"/>
<label for="factor_is_anonymous_0" class="required">Anonymous Collaborator</label>
<input type="radio" id="factor_is_anonymous_1" name="factor[is_anonymous]" required="required" value="false" />
<img src="/images/user-32.png"/>
<label for="factor_is_anonymous_1" class="required">User Name</label>
</div>
</div>
How can I get rid of the images from showing twice? I think this has to do with the images showing in the rendering of the overall choice "row" as well as in the rendering of each of the 2 choices. I tried various combinations for displaying the overall label and not, but I haven't been able to solve the issue... Could anyone help? thanks...
You need to move the definitions for your form blocks outside of any other block. Ie, move these lines outside any other block, best would be at the beginning or end of file
{% block _factor_is_anonymous_0_label %}
<img src="/images/anonymous-32.png"/>
{{ block ('form_label') }}
{% endblock %}
{% block _factor_is_anonymous_1_label %}
<img src="/images/user-32.png"/>
{{ block ('form_label') }}
{% endblock %}
I have a form with a collection type field, rendered like that:
<div id="beneficiosTab" class="opcional">
Beneficios
<ul class="beneficios" data-prototype="{{ form_widget(formAtendimento.beneficios.get('prototype')) | e }}">
{% for beneficio in formAtendimento.beneficios %}
<li>{{ form_row(beneficio.coTipoBeneficio) }}</li>
<li>{{ form_row(beneficio.vrValor) }}</li>
<li>{{ form_row(beneficio.boConcedido) }}</li>
{% endfor %}
<li>Add Beneficio</li>
</ul>
</div>
<div style="clear:both"></div>
{{ form_rest(formAtendimento) }}
The form's entity can have multiple items of the collection, or none.
When the entity has items of the collection, it works fine, but when it has none, the "for" in the twig doesn't happen, and a "Beneficios" div is generated in form_rest.
Any way I can prevent that? Thanks in advance.
This seems like a bug in the form rendering. I managed to disable the extra form rendering in the form_rest function, by adding this code just after rendering the collection elements:
{% do form.uploads.setRendered() %}
Where "uploads" is my collection field type.
This doesn't seem like best practice to me though.
So the whole rendering looks like this:
<div id="uploads" data-prototype="{{ form_widget(form.uploads.vars.prototype)|e }}">
{% for upload in form.uploads %}
{{ form_widget(upload) }}
{% endfor %}
</div>
{% do form.uploads.setRendered() %}
form_rest generate all unrendered forms. Every input is form in Symnfony2, the same goes with collection type.
You never printed out collection, so Symfony makes it for you.
If you want hide it, and still use form_rest simply print it it to:
<div style="display: none" />