CODEWITHSUNDEEP
symfonycheckboxtwitter-bootstrap-3
Roubi
Roubi

Reputation: 2106

How can I display my checkbox choices horizontaly with bootstrap theme for Symfony?

I have a small form with two checkboxes and one submit button that I want to display using Bootstrap. Each of my checkboxes has 14 choices with very short labels. My form:

$builder
    ->add('banks', 'entity', array(
                'class'         => 'AppBundle:Bank',
                'property'      => 'name',
                'multiple'      => true,
                'expanded'      => true,
                'required'      => false,
                'label'         => 'Banques',
          ))
    ->add('companies', 'entity', array(
                'class'         => 'AppBundle:Company',
                'property'      => 'name',
                'multiple'      => true,
                'expanded'      => true,
                'required'      => false,
                'label'         => 'Sociétés',
          ))
    ->add('search','submit', array('label'         => 'Filtrer'))
    ;

My view:

{% form_theme form 'bootstrap_3_layout.html.twig' %}
{{ form_start(form) }}

{{ form_row(form.banks) }}
<button type="button" class="btn btn-primary" id="check_banks">Cocher toutes les banques</button>
{{ form_row(form.companies) }}
<button type="button" class="btn btn-primary" id="check_companies">Cocher toutes les sociétés</button>
{{ form_end(form) }}

Should I try to find bootstrap form theme file and edit it or is there a more straightforward solution?

Upvotes: 2

Views: 4129

Answers (2)

Daniel
Daniel

Reputation: 8657

It is enough to add this code to options of field

   'label_attr' => array(
       'class' => 'checkbox-inline'
   )

for check-boxes and this 

   'label_attr' => array(
       'class' => 'radio-inline'
   )

for radio. There is result:

example_of_usage

Upvotes: 4

Roubi
Roubi

Reputation: 2106

Check your version of bootstrap_3_layout.html.twig. Older versions are bugged and must be changed as follow:

{% block checkbox_widget -%} {# INLINE FIXED !!!!!!!!!!!!!!!!!!!! #}
    {% set parent_label_class = parent_label_class|default(label_attr.class|default('')) -%}
    {% if 'checkbox-inline' in parent_label_class %}
        {{- form_label(form, null, { widget: parent() }) -}}
    {% else -%}
        <div class="checkbox">
            {{- form_label(form, null, { widget: parent() }) -}}
        </div>
    {%- endif %}
{%- endblock checkbox_widget %}

{% block radio_widget -%} {# INLINE FIXED !!!!!!!!!!!!!!!!!!!! #}
    {% set parent_label_class = parent_label_class|default(label_attr.class|default('')) -%}
    {% if 'radio-inline' in parent_label_class %}
        {{- form_label(form, null, { widget: parent() }) -}}
    {% else -%}
        <div class="radio">
            {{- form_label(form, null, { widget: parent() }) -}}
        </div>
    {%- endif %}
{%- endblock radio_widget %}

Then in your form, simply add

->add('fruits',          ChoiceType::class, array(
                                    'required' => true,
                                    'choices'  => $this->getFruits(),
                                    'multiple' => true,
                                    'expanded' => true,
                                    'label' => "Fruits ",
                                    'label_attr' => array('class' => 'checkbox-inline')
                                    ))

Upvotes: 1

Related Questions