I made a form with the FormBuilder of Symfony.
When I put my form in twig, the form_start(form) and form_end(form), it add a tag for each input.
I don't understand why twig adds a tag.
What is the solution to remove this tag
Thanks for your answer :)
Also, my formbuilder is like that :
->add('title', TextType::class, array(
'label'=>false,
'attr'=>array('autofocus'=>true)
))
my twig is like that :
{{ form_start(form) }}
<div class="row">
<div class="col-sm-9 p-1">
{{ form_row(form_record.title, {'attr':{'class':"form-control", 'placeholder':"Description"|trans, 'title':"Description"|trans }}) }}
{{ form_errors(form_record.title) }}
</div>
<div class="col-sm-1 pt-2">
<button type="submit" class="btn btn-success btn-circle btn-sm">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
{{ form_end(form) }}
and the result in the html source code is :
<div class="row">
<div class="col-sm-9 p-1">
<div>
<input type="text" id="app__title" name="app_[title]" required="required" class="form-control" placeholder="Description" title="Description">
</div>
</div>
</div>
So Twig add the
<div>
that I don't want. How can I remove this autocompleted tag?
I tried the
{% do form_record.title.set rendered %}
but maybe I think that it does not work.
Edit: Okay it seems I misunderstood the issue at first.
I thought you wanted to hide a field you had in your form which can be done with
{% do form.myField.setRendered %}
Now that I understand the issue, I believe it comes from the way your field is being printed.
There are 3 main components to a form field.
Label: form_label(form.field)
Widget: form_widget(form.field)
Errors: form_errors(form.field)
There is a way to print all three components at once. The function is
form_row(form.field)
Here comes the culprit: form_row(). Because it normally prints 3 different components, it adds a div around it!
Futhermore, by looking at the form type and seing 'label' => false, I can say that the label was printing at first using form_row.
To avoid having to define 'label'=>false everytime, you can simply print your form field in this manner:
{{ form_widget(form_record.title, {'attr':{'class':"form-control", 'placeholder':"Description"|trans, 'title':"Description"|trans }}) }}
{{ form_errors(form_record.title) }}
You can simply omit {{form_label(form_record.title)}} and it won't print.
On the other hand, I also noticed something that might be okay but seem wrong with the given example.
In the twig you shared, the form starts with {{ form_start(form) }} but then the field is {{ form_row(form_record.title)}}.
From where I come from form_record is undefined here. I would use {{ form_row(form.title)}}
Anyways, the explanation for the difference between form_row and form_widget can be found here: Symfony form differences between row and widget
Enjoy!
Related
Using Bootstrap5, Django and Crispy Forms to create a calculator application.
Application works as expected however I want to make changes to the appearance of the forms.
I've already removed the required field asterisk by simply adding the following to the CSS file:
.asteriskField {
display: none;
}
But now I want to place the label inside the field which requires a different approach that I'm currently unable to understand despite extensive research.
Having used Inspect in Chrome I can see that the label is of course a separate element but one housed within the field to achieve the given effect.
Current Form
Desired result
Settings.py (excerpt)
CRISPY_TEMPLATE_PACK = 'bootstrap5'
Forms.py (excerpt)
class InvestmentForm(forms.Form):
starting_amount = forms.ChoiceField(choices=STARTING_AMOUNT)
deposit_amount = forms.FloatField()
trade_in_value = forms.FloatField()
number_of_years = forms.FloatField()
credit_score = forms.ChoiceField(choices=CREDIT_SCORE)
state = forms.ChoiceField(
label='State',
choices=[(zipcode, zipcode) for zipcode in StateTax.objects.values_list('zipcode', flat=True).distinct()]
)
Index.html (excerpt)
<div class="row justify-content-center">
<h5 class="text-center"> Enter details below to see your estimate</h5>
</div>
<div class="col-md-8 mx-auto">
<form action="" method="POST">
{% csrf_token %}
{{ form|crispy }}
<br>
<button class="btn btn-primary" type="submit">Calculate</button>
</form>
<br>
</div>
</div>
You could use crispy-bootstrap5 which introduces floating labels. Just follow the installation guidelines and add a floating input field in your crispy Layout like:
FloatingField("first_name"),
I am trying to add a heading and a description to my galleries in the page galerie.html that are for looped but am having an issue with this, the link to the entire website: https://github.com/smarchitects/smarchitectsweb
How do I add a headline and description into the for loop?
Thank you!
I tried adding this code snippet:
<div class="col-12 center">
<h2>{{item.headline}}</h2>
<p>{{item.about}}</p>
</div>
in various places in the for loop and loop and then added this in various places in the front data:
"- headline: XXX"
"- about: YYY"
but none of the combinations worked for me...
Nice website! I cannot reproduce the issue and see any problem because your code is working for me.
Using {{ section | inspect }} shows this on the page:
{"gallery"=>[{"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/1.jpg", "description"=>"Karolína Harrachov"}, {"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/2022Harrachovexterier/SMARCH_HARR_03_FINAL_.jpg", "description"=>"Karolína Harrachov"}, {"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/2022Harrachovexterier/SMARCH_HARR_02B_FINAL_CORR01_.jpg", "description"=>"Karolína Harrachov"}]}
Your current code (below) seems to work fine though:
{%for section in page.galleries%}
<section class="padded">
<div class="capped-width m-l-center m-r-center" id="projekt-{{forloop.index}}">
<div class="gallery grid" id="lightgallery-{{forloop.index}}">
{% for item in section.gallery %}
<a class="{{item.column-size}} gallery-item" href="{{item.background_image}}">
<div class="bg-image lazy-div relative {{item.aspect-ratio}}" data-main="{{item.background_image}}">
<div class="galerie-overlay">
{{ item.description }}
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</section>
{%endfor%}
The description text is shown as expected as an overlay when hovering over an image.
I don't see any headline or about attributes.
Often I have template bits looking like
<div class="mydiv
{{ with_icon ? 'with-icon' }}
{{ full_width ? 'full-width' }}
{{ is_granted('foo') ? 'bar' }}"
>
which generates unwanted spaces
<div class="mydiv
with-icon
full-width
bar"
>
and looks in devtools like:
As you imagine, I'd like it to be:
<div class="mydiv with-icon full-width bar">
Using spaceless and add a space to each string being not a clean solution, to me.
Is there any straightforward solution for this?
So this is kinda difficult to explain so I have a sort video of the issue with annotations
It seems like static text is not rendering (see the H3 tag). The dynamic stuff like {{ foo.bar }} and things in loops seem to work fine. It is happening to all pages as far as I can tell.
I used the AngularClass repo as a starting point.
When the page is loaded directly or refreshed (F5 etc)
When its accessed via a link from another page
template file
<h3>GPS raw data</h3>
<div class="row" *ngIf="gps && gps.location">
<div class="col-md-4">
<strong>Time:</strong> {{ gps.location.timestamp }}
</div>
<div class="col-md-4">
<strong>Latitude:</strong> {{ gps.location.latitude }}
</div>
<div class="col-md-4">
<strong>Longitude:</strong> {{ gps.location.longitude }}
</div>
</div>
There is no errors in the console.
edit
Another image to possibly clear up what the actual problem is. Note the HTML has content in the title, its hard coded. But its not displayed.
1) 1st solution, it should be *ngIf and not ng-if
<div class="row" *ngIf="gps && gps.location"> //<<<===here
<div class="col-md-4">
<strong>Time:</strong> {{ gps.location.timestamp }}
</div>
<div class="col-md-4">
<strong>Latitude:</strong> {{ gps.location.latitude }}
</div>
<div class="col-md-4">
<strong>Longitude:</strong> {{ gps.location.longitude }}
</div>
</div>
2) 2nd solution, don't use *ngIf and use ?. operator as shown below,
<div class="row" >
<div class="col-md-4" >
<strong>Time:</strong> {{ gps?.location.timestamp }} //<<<==here
</div>
<div class="col-md-4">
<strong>Latitude:</strong> {{ gps?.location.latitude }} //<<<==here
</div>
<div class="col-md-4">
<strong>Longitude:</strong> {{ gps?.location.longitude }} //<<<==here
</div>
</div>
I encountered the same issue on Chrome and fixed it by removing the font-size style applied on that element. Not sure why, might be a bug of Chrome.
I have a the following checkbox field (1)
and I would like to add an image to the checkbox.
I added it in twig file in the following way (2) but it is bad placed.
I would like to place it in the following way (3)
// (1)
->add('remove_avatar', 'checkbox', array(
'label' => 'user.label.current_avatar',
'required' => false,
'mapped' => false,
))
// (2)
{{ form_widget(form) }}
<span class="user">
<img src="{{ get_avatar(user) }}" class="user-avatar">
</span>
// (3)
<div class="controls">
<img src="some_like">
<input type="checkbox" id="profile_remove_avatar" name="profile[remove_avatar]" value="1">
<label class="control-label" for="profile_remove_avatar">Remove the current avatar</label>
</div>
What is the best way to do it?
Instead of rendering the total form with only form_widget(form) you can do more if you render each field for itself. Like this:
<div class="controls">
<img src="some_like">
{{ form_widget(form.remove_avatar) }}
{{ form_label(form.remove_avatar) }}
</div>
If you got more fields in your form render them the same way OR place them all at the end with form_rest(form).
This is how you customize a symfony2 form from inside a twig template. So i think this is the best and easiest way.