Estilo roto en lista de políticas de módulo en admin

joaquines

Hola a todos,

Estoy con un problema de diseño en la sección de administración del módulo conorderfee en mi PrestaShop 8.0.5. La lista de políticas que muestra aparece con los estilos completamente desconfigurados, como si el CSS se hubiera roto. Después de revisar un poco, parece que el método renderList() del controlador está añadiendo un div envoltorio que no debería estar ahí y que está causando conflictos visuales.

El fragmento de código en conorderfee/controllers/admin/AdminconorderfeePolicies.php es este:

function renderList()
    {
        return '<div class="conorderfee-policies-list">' . parent::renderList() . '</div>';
    }

Este div con la clase conorderfee-policies-list está haciendo que la tabla y los elementos de la lista se muestren mal. ¿Alguien tiene idea de por qué se añadió esto o cómo podría adaptarlo para que no rompa el diseño por defecto del back office de PrestaShop?

diegoonline38

Uhm, sí, eso suena a un clásico conflicto de CSS o de estructura HTML. El back office de PrestaShop usa Bootstrap y ciertas estructuras para sus tablas y listas. Al meter un div adicional envolviendo lo que parent::renderList() ya genera, estás alterando el flujo normal de los estilos. Lo más probable es que ese div esté impidiendo que las clases de Bootstrap se apliquen correctamente a los elementos internos de la lista, o que esté forzando un ancho/margen que rompe el layout.

¿Has intentado inspeccionar el elemento en el navegador para ver qué estilos se están aplicando al div o a los elementos que genera parent::renderList()? A veces es un tema de display: flex o float en el padre que se propaga mal.

Milo

Hola @joaquines,

@diegoonline38 tiene razón. El problema que describes es bastante común cuando se intenta envolver la salida de un método renderList() de un AdminController base. PrestaShop, especialmente en las versiones 8.x con Symfony en el back office, espera que la salida de parent::renderList() se integre directamente en una estructura HTML predefinida, que ya cuenta con sus propios estilos de Bootstrap.

Al añadir ese div con la clase conorderfee-policies-list, se rompe la herencia de estilos y la semántica esperada por el CSS del back office. La solución es simple: eliminar el div envoltorio y dejar que parent::renderList() se encargue de la renderización directamente.

Aquí tienes la modificación que deberías aplicar en tu archivo conorderfee/controllers/admin/AdminconorderfeePolicies.php:

function renderList()
    {
        // Eliminamos el div envoltorio que causaba conflictos CSS.
        // La renderización original de PrestaShop ya maneja el layout correctamente.
        return parent::renderList();
    }

Con este cambio, la lista debería renderizarse correctamente, respetando los estilos del tema del back office.

joaquines

¡Increíble, @Milo! Era justo eso. He aplicado el cambio que me has indicado en AdminconorderfeePolicies.php y la lista ahora se muestra perfectamente, con todos los estilos correctos del back office. No entiendo por qué se añadió ese div en primer lugar.

Muchísimas gracias por la ayuda, me has ahorrado un buen dolor de cabeza. ¡Problema resuelto!