How style a repeatedType field form?

Question

From symfony 5, I have a view containing a form (for create a new user). In this form, I add a RepeatedType field for the password.

All works fine.

Now I want add some style but I am having difficulties:

With the Symfony API, I found how add css class to the div '#user_password' (the black box in the image), I found how add css class to input (the green box in the image). But I can't find how add class to the div in the blue box in the image. I'm looking for a way to add the class 'col-6' to the 'blue div'

My code :

        ->add('password', RepeatedType::class, [
            'type' => PasswordType::class,
            'label' => false,
            'first_options'  => [
                'label' => false,
                'attr' => [
                    'class' => 'form-control trapezoid',
                    'placeholder' => 'Password'
                ]
            ],
            'second_options' => [
                'label' => false,
                'attr' => [
                    'class' => 'form-control trapezoid',
                    'placeholder' => 'Password²'
                ]
            ],
            'attr' => [
                'class' => 'row',
            ],
            'row_attr' => [
                'class' => 'col-6', // has no effect
            ]
        ])

and the code in my twig file for the password fields:

<div>
    {{ form_widget( form.password) }}
</div>
{{ form_help(   form.password) }}
{{ form_errors( form.password) }}

First consider using bootstrap form theme (symfony.com/doc/current/form/form_themes.html). Also can you show us twig file? — ffx14

ffx14 ffx14 · Accepted Answer · 2020-04-16T10:17:49

Use 'row_attr' inside first_option and second_option

'first_options'  => 
[
    'label' => false,
    'attr' => [
        'class' => 'form-control trapezoid',
        'placeholder' => 'Password'
    ],
    'row_attr' => [
        'class' => 'col-6', 
    ]
],

How style a repeatedType field form?

1 Answers