Closed
Description
| Q | A |
|---|---|
| Bug report? | yes |
| Feature request? | no |
| BC Break report? | no |
| RFC? | no |
| Symfony version | 3.4 |
According to the bootstrap documentation an inline list of checkboxes should be rendered as follows
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
</div>
<div class="form-check form-check-inline disabled">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled> 3
</label>
</div>However it appears impossible to achieve this using the bootstrap 4 templates (symfony/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig) even with splitting the checkboxes in the form. For example:
{% for checkbox in form.myitem.children %}
{{ form_widget(checkbox) }}
{% endfor %}Result:
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" ... /> Label
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" ... /> Label
</label>
</div>Adding the required form-check-inline to the div, fixes the issue. However then there is no way to not have them be inline.
{% block checkbox_widget -%}
{%- set parent_label_class = parent_label_class|default(label_attr.class|default('')) -%}
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-check-input')|trim}) -%}
{% if 'checkbox-inline' in parent_label_class %}
{{- form_label(form, null, { widget: parent() }) -}}
{% else -%}
<div class="form-check{{ not valid ? ' form-control is-invalid' }} form-check-inline">
{{- form_label(form, null, { widget: parent() }) -}}
</div>
{%- endif -%}
{%- endblock checkbox_widget %}