MehdiB MehdiB - 5 months ago 27
Twig Question

Symfony - second button inline with input field

I have a form with several input fields and a submit button. now I want to add an extra

FileType
field with an upload button right in front of it. so the user can upload files before submitting the whole form.

I tried to add the button in twig after the input:

<button type='submit'>upload</button>


However the button is pushed to the next line, as symfony/twig(form_row) adds the Filetype field with 3 divs like this:

<div>
//input field here
</div>

<div>
//form errors here
</div>

<div class='clear'>
</div>


The button is added after these 3 divs and on the next line. How can I render this inline with the file upload field?

Answer Source

Symfony gives you a wide variety of ways to customize how a form is rendered. You can customize this form field by using other form/twig funtions like form_label(), form_widget() and form_errors.

<label>{{ form_label(form.file) }}</label>
<div class="inline">
    <button type="submit">Upload</button>
    {{ form_widget(form.file) }} // will render <input type="file" .../> widget
</div>
<div class="errors">
    {{ form_errors(form.file) }}
</div>

If you need to do it for all FileType likely you need to create a type extension and modify the default widget theme of this FileType.

Useful links: