Evitar Ajuste de Texto en Reportes Clásicos
En ocasiones, puedes encontrarte con un informe sobrecargado de numerosas columnas. Esto a menudo provoca que algunos datos, como fechas e identificaciones, se ajusten a la siguiente línea, lo cual puede ser bastante frustrante.
En el reporte mostrado abajo, la columna Hiredate se ajusta en la celda, lo que dificulta la lectura para el usuario.
En solo unos pocos pasos, puedes solucionar este problema y optimizar tu informe para facilitar la lectura.
Existen diferentes formas de evitar que el texto se ajuste automáticamente. En este blog, compartiré dos opciones.
Opción 1
Paso 1:
La primera opción es usar tu propia clase personalizada.
Selecciona la columna y, en "Formato de Columna" (Column Formatting), agrega el nombre de tu clase CSS. En este ejemplo, estoy usando cc-text-wrap
.
El prefijo agregado en esta clase CSS (cc-
) significa "clase personalizada" en inglés. Utilizo este prefijo para diferenciar mis clases personalizadas de las proporcionadas por el equipo de Oracle APEX, evitando nombrarlas igual que alguna clase ya existente.
Paso 2:
Ve a las propiedades de la página y, en la sección "CSS Inline", agrega lo siguiente:
.cc-text-wrap { white-space: nowrap; }
También puedes agregar esta regla CSS a un archivo y hacer referencia a él a nivel de página o de la aplicación.
Resultado:
En el ejemplo anterior, puedes ver cómo la primera columna Hiredate difiere en el estilo de la segunda columna Hiredate.
Segunda Opción
La segunda opción es utilizar una Clase de Utilidad disponible en el Universal Theme: u-nowrap
, usándola de la misma manera que se mencionó anteriormente en el atributo "Clases CSS" (CSS Classes).
¡Eso es todo! Ahora tu columna no se ajustará incluso cuando el tamaño de la pantalla se reduzca. Además, puedes mejorar este enfoque agregando personalizaciones adicionales.