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.

Diseño flexible en Firefox se colapsa hasta que se redimensiona la ventana.

11 Jun, 2023 Programación

Las imágenes probablemente explican el problema mejor que las palabras:

Así es como debería verse, funciona en Chrome:
Correcto
Así es como se ve en Firefox:
Incorrecto

Básicamente, el problema es que las dos primeras columnas se colapsan a un ancho de cero.

Una vez que redimensiono la ventana en cualquier pequeña cantidad o hago algún cambio en vivo en el CSS, se soluciona, pero la carga inicial siempre se ve así.

El código:

App.js, usando react y react-bootstrap

function App() {
  return (
    <Container fluid className={styles.app} >
      <Row className={styles.layoutRow + " h-100 m-0"}>
        <Col md="auto" className={styles.col + " d-flex text-center"}>
          <Name />
        </Col>
        <Col md="auto" className={styles.col + " d-flex"}>
          <Menu />
        </Col>
        <Col className={styles.col}>
          <Content/>
        </Col>
      </Row>
    </Container>
  );
}

CSS (aplicado a través de styles.app / styles.col)

.app, .col {
    padding-left: 1vh !important;
    padding-right: 1vh !important;
}

Sandbox:

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Problema con columnas colapsando en Firefox

    Como experto en TI especializado en CSS, ReactJS, Firefox y Flexbox, me he encontrado con el siguiente problema en el que las dos primeras columnas se colapsan a un ancho cero en Firefox. El problema ocurre durante la carga inicial, pero se soluciona una vez que se redimensiona la ventana o se realizan cambios en el CSS.

    Solución:

    A continuación se presenta una posible solución para corregir este problema:

    1. Elimine las propiedades de padding-left y padding-right de los estilos .app y .col en el CSS.

    2. Aplicar el relleno al componente Container directamente usando el atributo de style, como se muestra a continuación:

      <container fluid="" classname="{styles.app}" style="{{paddingLeft:" "1vh",="" paddingright:="" "1vh"}}="">

      Esto asegura que el relleno se aplique correctamente al componente Container y no interfiere con el diseño de las columnas.

      Alternativamente, puede definir una nueva clase de CSS específicamente para el relleno del componente Container y aplicarlo al componente Container.

    3. Si la solución anterior no funciona, puede intentar establecer un ancho específico para las dos primeras columnas utilizando la propiedad de width en CSS. Por ejemplo, puede establecer:

      .col:first-child,
.col:nth-child(2) {
 width: auto;
}

      Esto asegura que las dos primeras columnas tengan el ancho apropiado y no se colapsen a un ancho cero.

    ¡Espero que esto ayude a solucionar el problema!

Comments are closed.