Symfony2 - adding a CSS class to an expanded choice field (radio)

Question

I need to be able to add a CSS class to each individual radio button of my choice field(s). Unfortunately, Symfony2 stuffs expanded choices in a div, which gets any passed in CSS class rather than the buttons themselves.

Here's the default widget theming (in PHP):

<div <?php echo $view['form']->block($form, 'widget_container_attributes') ?>>
    <?php foreach ($form as $child): ?>
        <?php echo $view['form']->widget($child) ?>
        <?php echo $view['form']->label($child) ?>
    <?php endforeach ?>
</div>

Here's my div-less version (in twig):

{% block choice_widget_expanded %}
    {% for child in form %}
        {{ form_widget(child) }}
        {{ form_label(child) }}
    {% endfor %}
{% endblock %}

With that, how can I pass the CSS class to the actual widget? I'm passing it in like:

{% form_widget(form.blah, { 'attr' : { 'class': 'css-class' } }) %}

In my view, but I'm not sure how to grab it in my widget theme.

I can't not use radio buttons for this, so telling me to switch to a select or checkboxes isn't an option. And I really, really don't want to hard code the radios into my form view if I can help it.

EDIT: I've tried:

{% block choice_widget_expanded %}
    {% for child in form %}
        <input type="radio" value="{{ child.vars.value }}" {{ block('widget_attributes') }} />
    {% endfor %}
{% endblock %}

Yet it still renders a containing div in the source, and passes my CSS class to that div instead of the radio inputs. I know that the theme is 'working' because I had a few exceptions thrown during my fiddling.

EDIT 2: With the suggestion below, I've created my own radio_widget theme:

{% block radio_widget %}
    <input type="radio" class="star {split:2}" {{ block('widget_attributes') }} value="{{ value }}" {% if checked == true %}checked="checked"{% endif %} />
{% endblock %}

But, unfortunately, it's not generating the radios with the class I added above. I'm not sure if I need to do some inheritance work.

can you tell me how you finally set it all up / im faceing the same problem. which script are you including ? cous when i put in html form with ratio input (class="star") it doesnt show my stars — vardius
– vardius, Commented Jan 4, 2014 at 20:42

sickelap · Accepted Answer · 2013-06-24 21:05:29Z

1

Interesting, why you want every radio option to have a class attribute. But...

Because choice is a single field (no matter how many options it has) you can add class to the wrapper div only. For the theming you should use CSS.
Speaking about form theming if you want to override radio option you should override block radio_widget (you can find original one in form_div_layout.html.twig)
And of course don't forget to tell you template to use form theme:
```
{% form_theme form _self %}
```

answered Jun 24, 2013 at 21:05

sickelap

89711 silver badges21 bronze badges

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

4 Comments

Major Productions Over a year ago

Yeah, the problem is that each radio button is supposed to be part of a rating system. The rating system uses jQuery to dynamically replace the normal buttons with stars. But, your idea about overriding radio_widget is good, so let me try that

sickelap Over a year ago

Here's what google found for me kubyshkin.ru/posts/star-rating-input-pure-css.html I haven't tried that but that looks promising and you don't have to mess too much with form theming :)

Major Productions Over a year ago

Unfortunately, it doesn't allow for half stars.

sickelap Over a year ago

I'm pretty sure you can build that without messing with form theming. For example if you want to have 5 star rating and be able to rate in half star steps, create 10 options then style radio boxes with :odd and :even selectors while looking at examples in that link.

Collectives™ on Stack Overflow

Symfony2 - adding a CSS class to an expanded choice field (radio)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related