Skip to content

Commit 5f4d81c

Browse files
committed
minor #13727 Bootstrap 4 Form Theme : Added tip to get <input type="file"> displaying the selected file to upload (Levure)
This PR was submitted for the 3.4 branch but it was merged into the 4.4 branch instead. Discussion ---------- Bootstrap 4 Form Theme : Added tip to get <input type="file"> displaying the selected file to upload Added a tip about files input rendering in order to enable the display of the selected file. <!-- If your pull request fixes a BUG, use the oldest maintained branch that contains the bug (see https://symfony.com/roadmap for the list of maintained branches). If your pull request documents a NEW FEATURE, use the same Symfony branch where the feature was introduced (and `master` for features of unreleased versions). --> Commits ------- 3a01e25 Added tip for files input rendering
2 parents eb7c485 + 3a01e25 commit 5f4d81c

File tree

1 file changed

+10
-0
lines changed

1 file changed

+10
-0
lines changed

form/bootstrap4.rst

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,14 @@ Checkboxes and Radios
9494
For a checkbox/radio field, calling ``form_label()`` doesn't render anything.
9595
Due to Bootstrap internals, the label is already rendered by ``form_widget()``.
9696

97+
File inputs
98+
-----------
99+
100+
Files input are rendered using the Bootstrap "custom-file" class.
101+
102+
Due to Bootstrap internals, the rendered field does not display the selected filename.
103+
To fix that missing display, you can use the "`bs-custom-file-input`_" plugin (vanilla javascript), as recommended by `Bootstrap Forms documentation`_.
104+
97105
Accessibility
98106
-------------
99107

@@ -126,6 +134,8 @@ Symfony Form ``RadioType`` and ``CheckboxType`` by adding some classes to the la
126134
{{ form_row(form.myCheckbox, {label_attr: {class: 'switch-custom'} }) }}
127135
128136
.. _`WCAG 2.0 standard`: https://www.w3.org/TR/WCAG20/
137+
.. _`bs-custom-file-input`: https://www.npmjs.com/package/bs-custom-file-input
138+
.. _`Bootstrap Forms documentation`: https://getbootstrap.com/docs/4.4/components/forms/#file-browser
129139
.. _`custom forms`: https://getbootstrap.com/docs/4.4/components/forms/#custom-forms
130140
.. _`custom radio`: https://getbootstrap.com/docs/4.4/components/forms/#radios
131141
.. _`custom checkbox`: https://getbootstrap.com/docs/4.4/components/forms/#checkboxes

0 commit comments

Comments
 (0)