EasyCorp / EasyAdminBundle

EasyAdmin is a fast, beautiful and modern admin generator for Symfony applications.
MIT License
4.04k stars 1.02k forks source link

TextField with form type RepeatedType loses default bootstrap column classes #5676

Open Jesmaster opened 1 year ago

Jesmaster commented 1 year ago

I'm using easyadmin for user management and followed this guide to add the user password field with the functionality to correctly hash and save the password: https://dev.to/nabbisen/symfony-6-and-easyadmin-4-hashing-password-3eec

Everything is working correctly except that the TextFields no longer get the expected bootstrap classes so the input fields fill the container.

        yield TextField::new('password')
            ->setFormType(RepeatedType::class)
            ->setFormTypeOptions([
                'type' => PasswordType::class,
                'first_options' => ['label' => 'Password'],
                'second_options' => ['label' => 'Confirm Password'],
                'mapped' => false,
            ])
            ->setRequired($pageName === Crud::PAGE_NEW)
            ->onlyOnForms()
        ;

image image

I tried both addCssClass and setCssClass but they seem to be ignored. When I removed the setFormType and setFormTypeOptions then the field renders as expected.

theodiv commented 1 year ago

I know this answer comes late, but my solution was to override the repeated_row block itself.

{# templates/bundles/EasyAdminBundle/crud/form_theme.html.twig #}

{%- block repeated_row -%}
    <div {% if ea_crud_form.ea_field.columns is not null %}class="{{ ea_crud_form.ea_field.columns }}"{% endif %}>
        {# Manually render each child to avoid unnecessary HTML tags added by the form row block. #}
        {% for child in form %}
            {% set child_row_attr = child.vars.row_attr|merge({ class: (child.vars.row_attr.class|default('') ~ ' form-group')|trim }) %}

            <div {% with { attr: child_row_attr } %}{{ block('attributes') }}{% endwith %}>
                {{- form_label(child) -}}
                <div class="form-widget">
                    {{- form_widget(child) -}}

                    {% if child.vars.help is not null %}
                        <small class="form-help">{{ child.vars.help|trans(child.vars.help_translation_parameters, child.vars.translation_domain)|raw }}</small>
                    {% endif %}

                    {{- form_errors(child) -}}
                </div>
            </div>
        {% endfor %}
    </div>

    <div class="flex-fill"></div>
{%- endblock repeated_row -%}

And the result:

screenshot

falves97 commented 9 months ago

I have the same problem, what I needed to do was just set the width equal to the other inputs, the fieldColumn "solved" it.

lukaszoramus commented 6 months ago

Will this be fixed?