CODEWITHSUNDEEP
symfonycheckboxtwigsymfony-2.3
ZaquPL
ZaquPL

Reputation: 799

How to set styles for checkboxes in Symfony2?

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

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>

Upvotes: 2

Views: 4311

Answers (3)

Matej Đaković
Matej Đaković

Reputation: 880

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.

Upvotes: 1

acontell
acontell

Reputation: 6922

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.

Upvotes: 5

Alexandru Furculita
Alexandru Furculita

Reputation: 1373

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

Upvotes: 0

Related Questions