Search code examples
phpcsstwitter-bootstrapsymfonysymfony-forms

How style a repeatedType field form?


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:

enter image description here

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) }}

Solution

  • 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', 
        ]
    ],