Symfony: Bootstrap 4 Form Template can not correctly render inline checkboxes

Created on 22 Nov 2017  路  1Comment  路  Source: symfony/symfony

| 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.
symfony/src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig {% 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 %}

Bug Needs Review TwigBridge

Most helpful comment

You can set the 'label_attr' => array('class' => 'checkbox-inline')

Then create the form like:

{% for checkbox in form.myitem.children  %}
  <div class="form-check form-check-inline>
    {{ form_label(checkbox) }}
    {{ form_widget(checkbox) }}
    {{ form_errors(checkbox) }}
  </div>
{% endfor %}

In my opinion, the form_row should have a form-check instead of form-group for checkboxes like the examples at https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios

>All comments

You can set the 'label_attr' => array('class' => 'checkbox-inline')

Then create the form like:

{% for checkbox in form.myitem.children  %}
  <div class="form-check form-check-inline>
    {{ form_label(checkbox) }}
    {{ form_widget(checkbox) }}
    {{ form_errors(checkbox) }}
  </div>
{% endfor %}

In my opinion, the form_row should have a form-check instead of form-group for checkboxes like the examples at https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios

Was this page helpful?
0 / 5 - 0 ratings

Related issues

patrick-mcdougle picture patrick-mcdougle  路  3Comments

sunviwo picture sunviwo  路  3Comments

garak picture garak  路  3Comments

tdesvenain picture tdesvenain  路  3Comments

davidbarratt picture davidbarratt  路  3Comments