Edit view of checkbox list in Symfony form

Question

I have a form with an entity field where you can select multiple provinces. I want to show it like a list, one under another, but this is how it looks now:

And I want that it looks like this:

There is a way I can edit it?

The formType code:

$builder->add('provinces', EntityType::class, array(
    'label' => 'Provincias donde actuo',
    'required' => true,
    'class' => 'CASEventBundle:Province',
    'choice_label' => 'name',
    'required' => false,
    'multiple' => true,
    'expanded' => true
));

The twig template:

{{ form_label(form.provinces) }}
    <br>
    <input type="checkbox" class="selectAllCheckboxes">Seleccionar todos<br>
    {{ form_errors(form.provinces) }}
    {{ form_widget(form.provinces) }}
    <br><br>

Edit: Here is the HTML code that is generated:

<div id="cas_group_profile_provinces" class="claseprov">
            <input type="checkbox" id="cas_group_profile_provinces_1" name="cas_group_profile[provinces][]" value="1">
            <label for="cas_group_profile_provinces_1">Álava</label>
            <input type="checkbox" id="cas_group_profile_provinces_2" name="cas_group_profile[provinces][]" value="2">
            <label for="cas_group_profile_provinces_2">Albacete</label>
            <input type="checkbox" id="cas_group_profile_provinces_3" name="cas_group_profile[provinces][]" value="3">
            <label for="cas_group_profile_provinces_3">Alicante</label>
            <input type="checkbox" id="cas_group_profile_provinces_4" name="cas_group_profile[provinces][]" value="4">
            <label for="cas_group_profile_provinces_4">Almería</label>
        ...
</div>

You just add a good old css file to your template and style your html — Mawcel
– Mawcel, Commented Jan 26, 2017 at 13:18
check out symfony.com/doc/current/form/form_customization.html it explains how to change the layout of a specific form widget — Sam Janssens
– Sam Janssens, Commented Jan 26, 2017 at 15:00

Brjtr · Accepted Answer · 2017-01-26 15:53:45Z

3

I have found a solution by myself

{{ form_label(form.provinces) }}
    <br>
    <input type="checkbox" class="selectAllCheckboxes">Seleccionar todos<br>
    <div id="provs" st>
    {% for field in form.provinces %}
       <div class="provsli" style="display: inline-block; width: 180px;">
         {{ form_widget(field) }}
         {{ form_label(field) }}
       </div>
    {% endfor %}
    </div>

Even so thanks to all the answers :)

answered Jan 26, 2017 at 15:53

Brjtr

1574 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Serg Chernata · Accepted Answer · 2017-01-26 15:34:54Z

Looking at your example, the generated html you want is basically:

<label>
    <input type="checkbox"> Label Name
</label>

That way you can float labels and have them act as little containers for text and checkbox, or use flexbox and have even more control.

*{ box-sizing: border-box; }

div {
  display: flex;
  flex-wrap: wrap;
}

label {
  flex: 1 0 25%;
  white-space: nowrap;
  padding: 5px;
}

input {
  display: inline;
  margin: 0 10px 0 0;
}

<div id="cas_group_profile_provinces" class="claseprov">
  
  <label for="cas_group_profile_provinces_1"><input type="checkbox" id="cas_group_profile_provinces_1" name="cas_group_profile[provinces][]" value="1">Álava</label>
  
  <label for="cas_group_profile_provinces_2"><input type="checkbox" id="cas_group_profile_provinces_2" name="cas_group_profile[provinces][]" value="2">Albacete</label>
  
  <label for="cas_group_profile_provinces_3"><input type="checkbox" id="cas_group_profile_provinces_3" name="cas_group_profile[provinces][]" value="3">Alicante</label>
  
  <label for="cas_group_profile_provinces_4"><input type="checkbox" id="cas_group_profile_provinces_4" name="cas_group_profile[provinces][]" value="4">Almería</label>
  
  <label for="cas_group_profile_provinces_1"><input type="checkbox" id="cas_group_profile_provinces_1" name="cas_group_profile[provinces][]" value="1">Med length</label>
  
  <label for="cas_group_profile_provinces_2"><input type="checkbox" id="cas_group_profile_provinces_2" name="cas_group_profile[provinces][]" value="2">Short</label>
  
  <label for="cas_group_profile_provinces_3"><input type="checkbox" id="cas_group_profile_provinces_3" name="cas_group_profile[provinces][]" value="3">Something long</label>
  
  <label for="cas_group_profile_provinces_4"><input type="checkbox" id="cas_group_profile_provinces_4" name="cas_group_profile[provinces][]" value="4">Almería</label>
  
  <label for="cas_group_profile_provinces_1"><input type="checkbox" id="cas_group_profile_provinces_1" name="cas_group_profile[provinces][]" value="1">Álava</label>
  
  <label for="cas_group_profile_provinces_2"><input type="checkbox" id="cas_group_profile_provinces_2" name="cas_group_profile[provinces][]" value="2">Albacete</label>
  
  <label for="cas_group_profile_provinces_3"><input type="checkbox" id="cas_group_profile_provinces_3" name="cas_group_profile[provinces][]" value="3">Short</label>
  
  <label for="cas_group_profile_provinces_4"><input type="checkbox" id="cas_group_profile_provinces_4" name="cas_group_profile[provinces][]" value="4">Something long</label>
</div>

Collectives™ on Stack Overflow

Edit view of checkbox list in Symfony form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related