[Form] Improve rendering of file
field in bootstrap 4
This commit is contained in:
parent
a552e849d5
commit
32ad5d9f9c
@ -114,6 +114,16 @@
|
|||||||
</div>
|
</div>
|
||||||
{%- endblock percent_widget %}
|
{%- endblock percent_widget %}
|
||||||
|
|
||||||
|
{% block file_widget -%}
|
||||||
|
<div class="form-group">
|
||||||
|
<{{ element|default('div') }} class="custom-file">
|
||||||
|
{%- set type = type|default('file') -%}
|
||||||
|
{{- block('form_widget_simple') -}}
|
||||||
|
<label for="{{ form.vars.id }}" class="custom-file-label">Choose File</label>
|
||||||
|
</{{ element|default('div') }}>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
{% block form_widget_simple -%}
|
{% block form_widget_simple -%}
|
||||||
{% if type is not defined or type != 'hidden' %}
|
{% if type is not defined or type != 'hidden' %}
|
||||||
{%- set attr = attr|merge({class: (attr.class|default('') ~ (type|default('') == 'file' ? ' custom-file-input' : ' form-control'))|trim}) -%}
|
{%- set attr = attr|merge({class: (attr.class|default('') ~ (type|default('') == 'file' ? ' custom-file-input' : ' form-control'))|trim}) -%}
|
||||||
@ -186,8 +196,6 @@
|
|||||||
{%- if compound is defined and compound -%}
|
{%- if compound is defined and compound -%}
|
||||||
{%- set element = 'legend' -%}
|
{%- set element = 'legend' -%}
|
||||||
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label')|trim}) -%}
|
{%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label')|trim}) -%}
|
||||||
{% elseif type is defined and type == 'file' %}
|
|
||||||
{%- set label_attr = label_attr|merge({for: id, class: (label_attr.class|default('') ~ ' custom-file-label')|trim}) -%}
|
|
||||||
{%- else -%}
|
{%- else -%}
|
||||||
{%- set label_attr = label_attr|merge({for: id}) -%}
|
{%- set label_attr = label_attr|merge({for: id}) -%}
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
@ -269,15 +277,6 @@
|
|||||||
</{{ element|default('div') }}>
|
</{{ element|default('div') }}>
|
||||||
{%- endblock form_row %}
|
{%- endblock form_row %}
|
||||||
|
|
||||||
{% block file_row -%}
|
|
||||||
<div class="form-group">
|
|
||||||
<{{ element|default('div') }} class="custom-file">
|
|
||||||
{{- form_widget(form) -}}
|
|
||||||
{{- form_label(form) -}}
|
|
||||||
</{{ element|default('div') }}>
|
|
||||||
</div>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{# Errors #}
|
{# Errors #}
|
||||||
|
|
||||||
{% block form_errors -%}
|
{% block form_errors -%}
|
||||||
|
@ -940,9 +940,20 @@ abstract class AbstractBootstrap4LayoutTest extends AbstractBootstrap3LayoutTest
|
|||||||
{
|
{
|
||||||
$form = $this->factory->createNamed('name', FileType::class);
|
$form = $this->factory->createNamed('name', FileType::class);
|
||||||
|
|
||||||
$this->assertWidgetMatchesXpath($form->createView(), array('attr' => array('class' => 'my&class form-control-file')),
|
$this->assertWidgetMatchesXpath($form->createView(), array('id' => 'nope', 'attr' => array('class' => 'my&class form-control-file')),
|
||||||
'/input
|
'/div
|
||||||
[@type="file"]
|
[@class="form-group"]
|
||||||
|
[
|
||||||
|
./div
|
||||||
|
[@class="custom-file"]
|
||||||
|
[
|
||||||
|
./input
|
||||||
|
[@type="file"]
|
||||||
|
[@name="name"]
|
||||||
|
/following-sibling::label
|
||||||
|
[@for="name"]
|
||||||
|
]
|
||||||
|
]
|
||||||
'
|
'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user