CSS conflict betwenn symfony's twig tempalte and materialize's checkboxes

Question

I'm using the Twig template of Symfony 6 along with the Materialize framework. I have a ManyToMany relationship between a client and offers. Therefore, when creating my client, I want to assign one or more offers to them. So, I have an entityType in my form with the 'filled-in' CSS class.

->add('offres', EntityType::class, [
            'class' => CfgOffreCommerciale::class,
            'choice_label' => 'offre_nom',
            'label' => 'Offres',
            'multiple' => true, // Activer la sélection multiple
            'expanded' => true,
            'attr' => [
                'class' => 'filled-in',
            ],
        ])

I display my offers like this:

    <div class="col">
        <label>
            {{ form_label(form.offres) }}
            {{ form_widget(form.offres) }}
            <span>{{ form_errors(form.offres) }}</span>
        </label>
    </div>

And so, here's what I get:

<div class="col">
        <label class="required">Offres</label>
        <div class="input-field">
            <div id="client_new_form_offres">
                <input type="checkbox" id="client_new_form_offres_1" name="client_new_form[offres][]" value="1"/>
                <label for="client_new_form_offres_1">Option 1</label>
                <input type="checkbox" id="client_new_form_offres_2" name="client_new_form[offres][]" value="2"/>
                <label for="client_new_form_offres_2">Option 2</label>
                <input type="checkbox" id="client_new_form_offres_3" name="client_new_form[offres][]" value="3"/>
                <label for="client_new_form_offres_3">Option 3</label>
            </div>
        </div>
        <div class="form-error"></div>
    </div>

Here is what I should normally have:

<div class="col">
        <label class="required">Offres</label>
        <div class="input-field">
            <div id="client_new_form_offres">
                <label>
                    <input type="checkbox" class="filled-in" id="client_new_form_offres_1" name="client_new_form[offres][]" value="1"/>
                    <span for="client_new_form_offres_1">Option 1</span>
                </label>
                <label>
                    <input type="checkbox" class="filled-in" id="client_new_form_offres_2" name="client_new_form[offres][]" value="2"/>
                    <span for="client_new_form_offres_2">Option 2</span>
                </label>
                <label>
                    <input type="checkbox" class="filled-in" id="client_new_form_offres_3" name="client_new_form[offres][]" value="3"/>
                    <span for="client_new_form_offres_3">Option 3</span>
                </label>
            </div>
        </div>
        <div class="form-error"></div>
    </div>

Thanks in advance to those who take the time to help!

Please specify the actual problem... From what I can see is that you want to move the `input` elements *inside* the `label` correct? — DarkBee, Aug 23 '23 at 13:01
I can't show you because I don't have enough reputation, but basically, I don't know why the translation of the 'filled-in' class is not the same as that of Materialize. As a result, the checkboxes do not appear, only the labels. It's the same with the selects; the 'browser-default' class is not recognized either. Yes, the idea is to move it if it's possible. — Souyette, Aug 23 '23 at 13:09
Does this answer your question? [How can I add css classes to specific symfony2 form choices?](https://stackoverflow.com/questions/10770707/how-can-i-add-css-classes-to-specific-symfony2-form-choices) — DarkBee, Aug 23 '23 at 13:20
I forgot to precise but it works well when i use the CheckBoxType::class but i can't use EntityType::class — Souyette, Aug 23 '23 at 13:25
I've already tried {{ form_widget(form.offres, { 'attr': {'class': 'filled-in'} }) }}, but it doesn't work either. Unless you were referring to applying a custom layout to my form. — Souyette, Aug 23 '23 at 13:33

score 0 · Answer 1 · answered Aug 23 '23 at 14:22

Problem sovled, i made a form_theme :

{% block _your_form_name_widget %}
{# Personnalisation du rendu du champ "offres" #}
<div class="input-field">
    <div id="client_new_form_offres">
        {% for child in form %}
            <label>
                {{ form_widget(child, { 'attr': {'class': 'filled-in'} }) }}
                <span for="{{ child.vars.id }}">{{ child.vars.label }}</span>
            </label>
        {% endfor %}
    </div>
</div>

{% endblock %}

here is my form :

{% form_theme form 'plateforme/client/form_theme.html.twig' %}
    {# Placez ceci ici avant le champ "offres" #}

    <div class="col">
        <label>
            {{ form_label(form.offres) }}
            {{ form_widget(form.offres, { 'attr': {'class': 'filled-in'} }) }}
            <span>{{ form_errors(form.offres) }}</span>
        </label>
    </div>

CSS conflict betwenn symfony's twig tempalte and materialize's checkboxes

1 Answers1