How to resize columns and center content in sonata admin bundle

Question

How to resize columns and center content in sonata admin bundle?

Answer 1

you can ovveride the layout.css from sonataAdmin

Answer 2

As @ibasaw suggested, override the standard base_list_field.html.twig template by creating a new template as follows:

{# templates/list_entry_with_fixed_width.html.twig #}

{% extends '@SonataAdmin/CRUD/base_list_field.html.twig' %}

{% block field %}
    <div style="width: 100px; text-align: center;">
        {{ value }}
    </div>
{% endblock %}

Or, if you want to keep the ability to use the 'collapse' option, copy the original code and extend it:

{# templates/list_entry_with_fixed_width.html.twig #}

{% extends '@SonataAdmin/CRUD/base_list_field.html.twig' %}

{% block field %}
    {% apply spaceless %}
        {% if field_description.option('collapse') is not null %}
            {% set collapse = field_description.option('collapse') %}
            <div class="sonata-readmore"
                data-readmore-height="{{ collapse.height|default(40) }}"
                data-readmore-more="{{ collapse.more|default('read_more')|trans({}, 'SonataAdminBundle') }}"
                data-readmore-less="{{ collapse.less|default('read_less')|trans({}, 'SonataAdminBundle') }}"
                style="width: 100px; text-align: center;"
            >
                {{ value }}
            </div>
        {% else %}
            <div style="width: 100px; text-align: center;">
                {{ value }}
            </div>
        {% endif %}
    {% endapply %}
{% endblock %}

Then use that template to render a field in the list view:

protected function configureListFields(ListMapper $list): void
{
    $list
        ->add(
            'name',
            null,
            [
                'template' => 'list_entry_with_fixed_width.html.twig',
            ]
        );
}

(sonata-project/admin-bundle: 4.0.1)