Редактировать вид списка флажков в форме Symfony

Question

У меня есть форма с полем сущности, в котором вы можете выбрать несколько провинций. Я хочу, чтобы показать, как список, один под другим, но это то, как он выглядит сейчас:

И я хочу, чтобы это выглядит следующим образом:

Eсть способ, которым я могу его отредактировать?

Код formType:

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

Шаблон веточка:

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

Edit: Вот HTML код, который генерируется:

<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> 

Answer 1

Я нашел решение самого

{{ 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> 

Даже благодаря всем ответам :)

Answer 2

Глядя на вашем примере , сгенерированный html вы хотите basi чески:

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

Таким образом, вы можете плавать этикетки и иметь их действовать как маленькие контейнеры для текста и флажок, или использовать flexbox и иметь еще больший контроль.

*{ 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>