Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Bootstrap 4 Form Template can not correctly render inline checkboxes #25099

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
sschueller opened this issue Nov 22, 2017 · 1 comment
Closed

Bootstrap 4 Form Template can not correctly render inline checkboxes #25099

sschueller opened this issue Nov 22, 2017 · 1 comment
Labels
Bug Status: Needs Review TwigBridge

Comments

@sschueller
Copy link

sschueller commented Nov 22, 2017 •
edited
Loading

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 %}
@Simperfit Simperfit mentioned this issue Nov 23, 2017
Merged
@sproctor
Copy link

sproctor commented Jan 1, 2018 •
edited
Loading

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

fabpot added a commit that referenced this issue Jan 17, 2018
@fabpot
bug #25127 [TwigBridge] Pass the form-check-inline in parent (Simperfit)
de95a37 
This PR was merged into the 3.4 branch.

Discussion
----------

[TwigBridge] Pass the form-check-inline in parent

| Q             | A
| ------------- | ---
| Branch?       | 3.4
| Bug fix?      | yes
| New feature?  | no <!-- don't forget to update src/**/CHANGELOG.md files -->
| BC breaks?    | no
| Deprecations? | no <!-- don't forget to update UPGRADE-*.md files -->
| Tests pass?   | no
| Fixed tickets | #25099 <!-- #-prefixed issue number(s), if any -->
| License       | MIT
| Doc PR        | none

I'm trying to find a way to be able to handle this. Will add a reproducer soon.

Commits
-------

02b7edb [TwigBridge][WIP] Pass the form-check-inline in parent
@fabpot fabpot closed this as completed Jan 17, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug Status: Needs Review TwigBridge
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@fabpot @sproctor @sschueller @xabbuh @carsonbot