es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Oracle Apex: Ajustar el contenido de la región al ancho, no a la altura.

28 Jul, 2023 Programación

Instancia de demostración: https://apex.oracle.com/pls/apex/f?p=4550:1:5503592728301

Espacio de trabajo: DEMO_BARRY

demo/help123456
Descripción de la imagen aquí

Estoy trabajando con un nuevo complemento. Se ve genial, el problema es que va a ser muy grande (largo).

El tamaño de la demostración se encuentra en la segunda región “small”. Se ve genial.

Hice el tamaño 3000 en la primera región grande para ver cómo se escala a muchas operaciones (tendré cientos).

Pero el navegador lo ha reducido para que quepa.
Descripción de la imagen aquí

Me gustaría que tuviera un ancho del 100% con el usuario desplazándose hacia abajo, para que la fuente y las cajas tengan el mismo tamaño que en la región “small”.

He intentado muchas combinaciones de configuraciones en la cabecera HTML de las regiones, pero mis conocimientos de CSS/HTML no son suficientes, así que estoy buscando ayuda.
Descripción de la imagen aquí

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para que la primera región en la instancia de demostración tenga un ancho del 100% y el usuario pueda desplazarse hacia abajo de manera similar a la región “small”, es necesario aplicar algunos estilos CSS al encabezado HTML de la región. Sigue estos pasos:

    1. Ve a la primera región “Large”.
    2. Haz clic en el botón “Editar” para abrir la configuración de la región.
    3. Ve a la pestaña “Diseño de página” y haz clic en la sección “Encabezado HTML”.
    4. Añade los siguientes estilos CSS:
    /* Establece el ancho en 100% */
.region-content {
    width: 100%;
}

/* Añade una barra de desplazamiento al contenido de la región */
.region-content {
    overflow-y: auto;
}

/* Reinicia el margen y el relleno a 0 */
.region-content,
.region-content .t-Region-body {
    margin: 0;
    padding: 0;
}

/* Haz que el tamaño de fuente y las cajas sean iguales que en la región "small" */
.region-content *,
.region-content *:before,
.region-content *:after {
    font-size: 14px !important;
    box-sizing: border-box !important;
}
    1. Haz clic en el botón “Aplicar cambios” para guardar la configuración.

    Con estos estilos CSS, la primera región debería tener ahora un ancho del 100%, mostrar una barra de desplazamiento cuando sea necesario y tener el mismo tamaño de fuente y cajas que la región “small”.

Comments are closed.