How to set styles for checkboxes in Symfony2?

Question

I have problem with checkboxes which I render by FormBuilder.

The problem is that <input/> is generated inside <label></label>. The result is the following:

I don't know what I should do to format this checkboxes to the state on the right side of the image. I check documentation and I have not found any methods which can give access to change the way how this fields are rendered.

Twig:

{{ form_widget(form.colors, { 'attr': {'class': 'MY-CLASS'} } ) }}

HTML Result:

<div id="template_colors" class="MY-CLASS">
    <input type="checkbox" id="template_colors_0" name="template[colors][]" value="white">
    <label for="template_colors_0">White</label>

    <input type="checkbox" id="template_colors_1" name="template[colors][]" value="red">
    <label for="template_colors_1">Red</label>

    <input type="checkbox" id="template_colors_2" name="template[colors][]" value="black">
    <label for="template_colors_2">Black</label>
</div>

acontell · Accepted Answer · 2015-01-25 20:07:51Z

5

You can change the way the checkboxes are rendered in several ways. I'm going to show you the easiest one (in the example, I assume form.colors as the variable that holds the choice element):

<div class="" style="display: inline-block;">
{% for color in form.colors %}
   <label class="check">
   {{ form_errors(color) }}
   {{ form_widget(color) }}
   <span>{{ color.vars.label }}</span>
   </label>
{% endfor %}
</div>

This would ouput something like:

<div class="" style="display: inline-block;">
    <label class="check">
    <input type="radio" id="whatever" name="whatever" required="required" value="whatever" checked="checked">
    <span>Red</span>
    </label>
    <label class="check">
    <input type="radio" id="whatever" name="whatever" required="required" value="whatever" checked="checked">
    <span>Blue</span>
    </label>                        
</div>

But it's just an example, you can format it the way you like. You can also pass the class attribute to any of them as usual.

answered Jan 25, 2015 at 20:07

acontell

6,9321 gold badge22 silver badges33 bronze badges

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

1 Comment

ZaquPL Over a year ago

Your solution is great, but it works only for checkbox and radio. And what about lists (when option expanded=false and multiple=false)? I tried your method but it seems that it doesn't work.

Matej Đaković · Accepted Answer · 2015-11-15 21:49:27Z

1

In case you would like to have rows of four checkboxes, that will be something like:

{# Wrap span around checkboxes #}
{{ form_label(form.fees) }}
{{ form_errors(form.fees) }}<br>
{% for batch in form.fees|batch(4) %}
    <div class="batchRow">
        {% for option in batch %}
            <div class="yourClassName">
                {{ form_label(option) }}
                {{ form_widget(option) }}
            </div>
        {% endfor %}
    </div>
{% endfor %}

Otherwise you can get rid of the batch level.

answered Nov 15, 2015 at 21:49

Matej Đaković

8105 silver badges22 bronze badges

Comments

Alexandru Furculita · Accepted Answer · 2015-01-25 19:19:53Z

0

That's more of a CSS problem. If the inputs are inside the label you can place everything inline easily. Here is the code Bootstrap is using to do that: https://github.com/twbs/bootstrap/blob/master/less/forms.less#L210.

If you want to use Bootstrap styles on your form you can use the Bootstrap form theme in Symfony for that.

If you want to customize a certain field type and how it is rendered, you can create a form theme for that. Here are more details on that: http://symfony.com/doc/current/cookbook/form/form_customization.html#what-are-form-themes

Hope it helps

answered Jan 25, 2015 at 19:19

Alexandru Furculita

1,3739 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to set styles for checkboxes in Symfony2?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related