Symfony: простой способ форматировать FORMS с помощью CSS?

Question

Мы создаем веб-сайт с Symfony 2. Мы создаем уникальный URL-адрес и отправляем его по электронной почте пользователю, который забыл пароль, чтобы они могли сбросить свой пароль.

Мы создаем простую форму для сброса пароля. У нас есть две метки («Введите новый пароль» и «Введите новый пароль еще раз») с текстовым полем рядом с каждым.

Мы хотели, чтобы текстовое поле выравнивалось друг с другом.

Ленивый решение было выяснить две строки одинаковой длины (!)

Но я бы хотел, чтобы отформатировать их с помощью CSS или поместить их в таблицу ...

Это возможно при все с формой Symfony? Я прочитал документацию о настройке шаблонов, но когда мы попробовали решение, предложенное в документации Symfony виджетов (Textboxes) не рендеринг ...

Вот некоторые фотографии из выпуска:

Crooked textboxes

Lazy solution

Вот код веточке, где я думаю (!) форматирование должно быть сделано

{% block blockPrincipal_mp %} 
<h1>{{ titre }}</h1> 
{{ form_start(form) }} 


<div class="containerForm"> 
    <div class="error"> 
     {{ form_errors(form) }} 
    </div> 
    {{ form_rest(form) }} 





    {{ form_end(form) }} 
    {% for flashMessage in app.session.flashbag.get('success') %} 
     <div class="confirm"><p> {{ flashMessage }}</p></div> 
    {% endfor %} 
     </div> 
{% endblock %} 

Answer 1

Вы можете визуализировать все различные элементы форм отдельно, а не просто показывать все за один раз с form_rest(form), как у вас в вашем примере. form_rest() собирается сделать все, что еще не было сделано. И до этого момента все, что было сделано, - это ошибки.

Я не знаю, какие имена вашей формы собственности являются, но вот пример:

{{ form_start(form) }} 

    <div class="form_errors">{{ form_errors(form) }}</div> 

    {# output all pieces of the username element individually #} 
    <div class="form_label">{{ form_label(form.username) }}</div> 
    <div class="form_input">{{ form_widget(form.username) }}</div> 
    <div class="form_errors">{{ form_errors(form.username) }}</div> 

    {# output all pieces of the password element individually #} 
    <div class="form_label">{{ form_label(form.password) }}</div> 
    <div class="form_input">{{ form_widget(form.password) }}</div> 
    <div class="form_errors">{{ form_errors(form.password) }}</div> 

    {{ form_rest(form) }} 

{{ form_end(form) }} 

Таким образом, вы можете контролировать то, что HTML оберток окружают каждую часть ваших элементов формы.

Обратите внимание, что вы также можете выводить имя пользователя и пароль поле, выполнив ...

{{ form_row(form.username) }} {{ form_row(form.password) }} 

... и это все равно будет выводить ярлык, виджет и ошибки, но будет использовать макет по умолчанию для тех формы типы, которые определены в ваших шаблонах ветви. Таким образом, у вас есть больший контроль над рендерингом частей, если вы делаете их индивидуально.

Это отлично подходит для пользовательских форм и настраиваемых шаблонов, однако вы также можете переопределить макет элемента формы по умолчанию, если хотите больше контролировать, как отдельные элементы формы отображаются на вашем сайте, путем расширения шаблона полей форм.

https://symfony.com/doc/current/form/form_customization.html

Answer 2

RepeatedType поля может быть обходился отдельно:

{{ form_row(form.password.first) }} 
{{ form_row(form.password.second) }} 

или более управляемый:

{{ form_label(form.password.first) }} 
{{ form_widget(form.password.first) }} 

{{ form_label(form.password.second) }} 
{{ form_widget(form.password.second) }}