Material-ui: [Cuadrícula] Ancho adicional del contenedor y la barra de desplazamiento

Encontré el mismo problema en flexboxgrid . Creo que es una limitación de nuestra solución de margen negativo que implementa el espaciado.
He comprobado lo que hace bootstrap, no tienen esta función de espaciado, por lo que no hay problema por su parte.

Entonces tiene 3 soluciones alternativas disponibles:

• Sin usar la función de espaciado e implementarla en el área de usuario spacing={0} , podríamos hacer que este sea el comportamiento predeterminado.
• Agregar un relleno en el padre con, al menos, el valor de espaciado: https://codesandbox.io/s/WnpKlQ32n

    <div style={{ padding: 20 }}>
      <Grid container spacing={40}>

• Agregar overflow-x: hidden; en el padre.

Estoy cerrando porque no puedo pensar en una mejor alternativa. Si alguien tiene una mejor solución para la función de espaciado, por favor levante la voz :).

Para mí, parece que spacing={0} debería ser el comportamiento predeterminado. Al menos hasta que aparezca una solución mejor, porque parece ser un error con <Grid /> para los usuarios nuevos de material-ui.

@hboylan A la luz de todos esos problemas abiertos para esta limitación, ¡estoy empezando a preguntarme! Ojalá tuviéramos acceso a algunos análisis de uso de API 📈.

He agregado la etiqueta waiting for users upvotes . No estoy seguro de que la gente prefiera tener spacing={0} . Así que, por favor, vote a favor de este problema. Daremos prioridad a nuestro esfuerzo en función del número de votos a favor.

Al menos 8 números duplicados es una buena señal. Agregaré una nota sobre esta limitación en la documentación.

Me pregunto: ¿hay alguna advertencia sobre el uso de la segunda solución que describió ?

Si no es así, ¿podría agregar esto en Grid-container-Component por defecto?

actualizar:
=> tonta de mí;) claro: estamos perdiendo el espacio, lo siento.

No puedo solucionar esto en material-ui @ next usando spacing={0} en el contenedor, o cualquiera de las otras dos soluciones, incluido overflowing-x y demás. ¿Quizás me estoy perdiendo algo?

flexboxgrid (que @oliviertassinari mencionó que tiene los mismos problemas) tiene una bifurcación que dice haberlo solucionado. https://github.com/kristoferjoseph/flexboxgrid/issues/144#issuecomment -321694572 No he profundizado en el código, pero podría valer la pena investigar para ver si hay algo que podamos usar en Grid.

Hola,

Recientemente comenzamos a adoptar esta biblioteca para uno de nuestros proyectos.

Puedes imaginar nuestra sorpresa cuando descubrimos este hilo.

Básicamente, se trata de un error que se ha cerrado sin soluciones a partir de la última versión de material-next. Esto es preocupante.
Aún más preocupante es la idea de que en lugar de corregir este error, ahora tenemos texto agregado en los documentos que habla de "una limitación".

¿Tienen algún procedimiento con respecto a errores y correcciones de errores? ¿O todo se decide sobre el terreno?

Esta es la versión preliminar 1.0.0:
https://github.com/mui-org/material-ui/issues?q=is%3Aopen+is%3Aissue+milestone%3Av1.0.0-prerelease

Extrapolando de este hilo, ¿asumiremos que la versión preliminar 1.0.0 tiene muchos más errores de los que vemos allí? (es decir, este problema, por ejemplo)

¿Cuántos errores de material-ui válidos cerraron hasta ahora en github y, en lugar de corregir, agregaron texto en los documentos?

De lo contrario, el marco es genial. Son los procedimientos los que son un poco preocupantes.

Gracias, y me disculpo si ofendí a alguien y / o si vine un poco fuerte.

@kmlx

vamos a suponer 1.0.0- preliminar beta en realidad tiene mucha más errores que lo que vemos allí?

Sin duda debería hacerlo (consulte: Problemas ). Y debería esperar que 1.0.0-rc.x también tenga errores, pero la API será mayormente estable.

El momento de @ryanflorence 's tuit es perfecto.

Pido disculpas si ofendí a alguien y / o si vine un poco fuerte.

Si sabe que está pareciendo un poco fuerte, no se disculpe; reconsidere lo que quiere decir y cómo quiere decirlo. (Y tal vez eche un vistazo a cuánto valor ha obtenido del código abierto, en comparación con cuánto ha contribuido, y decida si su queja tiene algún peso).

Mejor aún, si las soluciones provisionales proporcionadas en los documentos no son suficientes, conéctese al CSS y vea si puede resolver la limitación que le molesta.

@mbrookes

Gracias por tomarse el tiempo para responder.

Ciertamente debería (ver: Problemas). Y debería esperar que 1.0.0-rc.x también tenga errores, pero la API será mayormente estable.

Me alegra saber que la API será mayormente estable. Como cualquier proyecto, supongo que habrá varios problemas por descubrir.

Aún así, por el momento, las soluciones para este problema no funcionan y el problema en sí está cerrado.
Según su mensaje anterior, esta bifurcación flexboxgrid podría proporcionar una solución.
Asumiré que las confirmaciones a partir del 1 de agosto son aquellas en las que uno debería buscar una solución.

Si las soluciones documentadas ya no funcionan (estoy en un dispositivo móvil actualmente, por lo que no puedo probar), entonces este problema debe reabrirse.

Gracias por buscar una solución.

Por cierto, no tengo el problema, y ​​mi solución fue hacer manualmente spacing={0} en cada componente <Grid container /> o <Grid item container /> en mi código.

@kmlx He probado con éxito las soluciones alternativas sugeridas con beta.22. No dude en informarnos si encuentra una solución permanente.

Agregué spacing={0} pero en realidad quería espaciado, así que agregué relleno e hice que solo agregara el relleno por encima del punto de interrupción medio donde mostraba dos columnas:

const styles = theme => ({
  dividerRight: {
    [theme.breakpoints.up('md')]: {
      paddingRight: theme.spacing.unit * 0.5
    }
  },
  dividerLeft: {
    [theme.breakpoints.up('md')]: {
      paddingLeft: theme.spacing.unit * 0.5
    }
  },
});

Luego agregué className={classes.dividerRight} a la columna de la izquierda (ya que el divisor está a la derecha) y className={classes.dividerLeft} a la columna de la derecha

Acabo de tener este problema. Lo resolvió agregando el siguiente CSS al contenedor de la cuadrícula y se ve bien

.grid-container {
  width: 100% !important;
  margin: 0 !important;
}

@martjoao Para mí, esto resultó en un relleno no deseado alrededor del exterior de mi contenedor de cuadrícula (tengo elementos en el interior que deberían estar alineados con los bordes).

Mi solución rápida y sucia para esto fue simplemente lanzar overflow-x: hidden; en el elemento del cuerpo. Pero en ciertos navegadores (en particular los móviles), cuando se desplaza, la barra de desplazamiento horizontal parpadea durante un segundo, lo que indica al usuario que puede desplazarse hacia la derecha. Esto todavía es indeseable para mí.

EDITAR:

Acabo de ver el enfoque de desbordamiento que se mencionó anteriormente. Culpa mía.

Creo que vale la pena señalar que el uso previsto de <Grid> es _no_ aplicación / diseño principal (por ejemplo, barra de aplicaciones, barra lateral, área de contenido, etc.). Realmente está destinado a distribuir elementos de contenido en una cuadrícula (por ejemplo, una lista de perfiles). Con eso en mente, espaciar los elementos con márgenes para que su área de contenido no se vea afectada, para que pueda, por ejemplo, agregar un color de fondo o bordes, tiene sentido.

Pero la documentación sugiere que el elemento <Grid> debe usarse para el diseño principal al tener una sección completa llamada "Diseño" que describe el uso de <Grid> .

Otra razón por la que muchas personas encuentran esto contradictorio es porque todos los demás marcos de interfaz de usuario proporcionan un mecanismo para realizar el diseño primario (que se consideraría el caso del 80%, @oliviertassinari), y el diseño de una cuadrícula de elementos de contenido es una preocupación secundaria.

Pero la documentación sugiere queEl elemento debe usarse para el diseño principal al tener una sección completa llamada "Diseño" que describe el uso de.

@wmadden ¿

Otra razón por la que muchas personas encuentran esto contradictorio

¿Qué es contradictorio?

que se consideraría el caso del 80%

Estoy de acuerdo, tenemos: # 10986 para eso.

@wmadden ¿

Está en una sección de nivel superior llamada "diseño", en lugar de solo una demostración de componente. Y redactando así:

La cuadrícula crea coherencia visual entre diseños al tiempo que permite flexibilidad en una amplia variedad de diseños. La interfaz de usuario receptiva de Material Design se basa en un diseño de cuadrícula de 12 columnas.

me hizo suponer que era apropiado usarlo para diseñar mi aplicación, donde la limitación del margen negativo se convierte rápidamente en un problema.

Otra razón por la que muchas personas encuentran esto contradictorio

Me refiero a que a la gente le parece contradictorio que el componente Grid no deba usarse para el diseño principal, ya que los marcos de interfaz de usuario generalmente proporcionan una solución de diseño para ese propósito, y generalmente se encuentra en un tema de documentación de nivel superior llamado "diseño".

Es una suposición común en React que los niños serán contenidos por sus padres. El margen negativo de <Grid> rompe esa suposición al extenderse más allá de los límites de su padre, lo que hace que su comportamiento parezca un error para cualquiera que no sepa que es por diseño.

@ vedant1811 El margen negativo ya no es el comportamiento predeterminado. Debería poder utilizar Grid sin él para el diseño de su aplicación.

@oliviertassinari ¿Hubo alguna actualización que cambió esto? Solo me pregunto si necesito actualizar mi versión del paquete. Estaba usando overflow: hidden; en la solución alternativa del elemento principal antes.

@saricden Sí, al no proporcionar una propiedad spacing , la mayoría de las bibliotecas de cuadrículas disponibles no tienen esta función, permiten que las personas manejen el margen.

Me encontré con esto. Lo que parece ser otra solución hacky pero aceptable es poner un ancho: 'calc (100% - 16px)' en el contenedor de la cuadrícula ... al menos para mi situación en tamaños de pantalla pequeños.

Jugar con diferentes anchos para diferentes puntos de interrupción puede mejorar esto, pero el problema es mucho menos notable cuando la pantalla produce un contenedor más ancho.

Todavía tengo el mismo problema, pero se solucionó agregando xs = {12}.
<Grid container spacing={3} xs={12}>

Este problema persiste. Agregar spacing={...} provoca un desplazamiento horizontal. Agregar xs={12} no lo resuelve.

_Por lo que vale:_
Me encuentro con este problema con Material-UI 4.5.0. Por alguna razón, acabo de notar esto y he estado usando Material-UI durante más de un año.

Probé la sugerencia xs={12} anterior además de un estilo de margen (porque estaba viendo un margen adicional en el lado derecho), y lo siguiente produce el efecto deseado visualmente:

const useStyles = makeStyles(theme => ({
  grid: { margin: theme.spacing(0) }
}));
...
<Grid container spacing={2} xs={12} className={classes.grid}>

_Sin embargo ..._ Recibo una advertencia en la consola:

Advertencia: Tipo de accesorio fallido: El accesorio xs de Grid debe usarse en item .

Entonces, en lugar de usar xs={12} en el contenedor, copié los estilos que estaba agregando a makeStyles() . Lo siguiente parece estar haciendo el truco para mí hasta ahora:

const useStyles = makeStyles(theme => ({
  grid: {
    margin: theme.spacing(0),
    flexGrow: 0,
    maxWidth: `100%`,
    flexBasis: `100%`
  }
}));
...
<Grid container spacing={2} className={classes.grid}>

Es solo maxWidth: 100% , lo que hizo que esto funcionara. sin embargo, el ancho ahora se estira al máximo. esto no funcionará si establezco un valor de maxWidth específico.

He solucionado esto usando componentes con estilo para establecer el margen del contenedor Grid en cero.

Contenedor de rejilla con estilo:

const GridContainer = styled(Grid)`
  margin: 0;
`;

Ahora se usa GridContainer, en lugar del componente Grid que estaba generando el ancho adicional.

      <GridContainer
        container
        direction="column"
        justify="center"
        alignItems="center"
        xs={12}
        spacing={2}
      >

Usé elcomponente dentro de una envoltura de 100% de ancho y alto, pero me encontré con este problema en el que el contenedor estira la página más allá de 100vw y causa un desbordamiento horizontal. No entiendo por qué se usa un margen negativo para esto. Tuve que anular los estilos predeterminados para devolver la página a los límites:

const NormalizedGridContainer = withStyles(theme => ({
  root: {
    width: '100%',
    margin: '0px',
    padding: `${(spacing/2) * 8}px`
  }
}))(Grid);

En mi opinión, debería ser un poco más obvio que los contenedores Grid no están destinados a ser utilizados como envoltorio de una aplicación.

En tamaño de escritorio, tengo imágenes que se extienden hacia un lado y que se fijan con xs = {12} extrañamente hizo que apareciera un relleno. En mi caso, la solución parece la solución de @martjoao , pero solo el ancho del móvil:
gridSpacingFix: { '<strong i="7">@media</strong> (max-width:600px)': { width: '100% !important', margin: '0 !important', }, },

Encontré un problema similar y lo solucioné:

body { margin: 0; padding: 0; }

Terminé haciendo a continuación:

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        margin: "0 !important"
      }
    },
  }
});

Esto resuelve el problema.

Solo estaba enfrentando ese problema también y mirando la cantidad de problemas relacionados, me preguntaba si tiene sentido solucionar esto en material-ui.

¿No podríamos hacer esencialmente lo mismo que ellos aquí: https://github.com/evgenyrodionov/flexboxgrid2/commit/37e02fec7674495782098fb8e9a2c6d20a2786e1#diff -4b62e0ae269a54df45ab5eab9cb7821b?

Me encontré con el mismo problema, encontré una solución parcial al hacer

<Container maxWidth={false}>
  <Grid container spacing={3}>
    <Grid item />
  </Grid>
</Container>

Todavía tengo el mismo problema, pero se solucionó agregando xs = {12}.
<Grid container spacing={3} xs={12}>

Esto me lo arregló ... ¡Gracias!

Todavía tengo el mismo problema, pero se solucionó agregando xs = {12}.
<Grid container spacing={3} xs={12}>

Esto me lo arregló ... ¡Gracias!

¡Solución impresionante! Esto también lo solucionó para nosotros. Tuvimos que agregar container item para evitar una advertencia de contenedor + xs.

problema resuelto después de agregar overflow-x: hidden ; en el padre, como dentro de Container have mui-datatable, por lo que se agregó overflowX: 'hidden' al contenedor

Terminé haciendo a continuación:

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        margin: "0 !important"
      }
    },
  }
});

Esto resuelve el problema.

Gracias, esta fue la única solución funcional para mí.

_Parece_ trabajar para mí omitir el margin 0 !important

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        // margin: "0 !important"
      }
    },
  }
});

Me desconcierta que este marco de interfaz de usuario tenga tantos errores. Tu

@SomnathKadam

problema resuelto después de agregar overflow-x: hidden ; en el padre, como dentro de Container have mui-datatable, por lo que se agregó overflowX: 'hidden' al contenedor

El problema con esto es que aún puede desplazarse. overflow-x: hidden no es una buena solución

MuiGrid: {
envase: {
ancho: "100%! importante",
margen: "0! importante"
}
},
@ rag4214
Esto modifica a la fuerza la estructura de todo el marco y no se recomienda. Puede arreglarlo en un lugar, romperlo en otro.

@ manualva7 https://material-ui.com/components/grid/#negative -margin

Estoy sorprendido, he estado usando MUI durante tal vez 2 años y nunca antes había visto esto. Todavía no he descubierto por qué sucedió.

Terminé haciendo a continuación:

const theme = createMuiTheme({
  overrides: {
    MuiGrid: {
      container: {
        width: "100% !important",
        margin: "0 !important"
      }
    },
  }
});

Esto resuelve el problema.

Esta solución me funciona.

Esto ha estado sucediendo durante tanto tiempo que debería ser parte de la documentación si no es posible solucionarlo de inmediato.

¿Hay alguna solución todavía?
Tengo este problema y estoy pensando en usar overflow-x: hidden , ¿qué piensas?

El problema sigue ahí. La solución overflow-x: propiedad oculta en el padre

Solo otro truco para esto, que funciona para mí;)

const useStyles = makeStyles((theme) => ({
 root: {
    '& .MuiGrid-root': {
      width: 'calc(100% - 2px)',
    },
  },
// [...]

esos 2px parecen agregarse en algún lugar debajo de mi definición de cuadrícula, por lo que el valor real podría ser diferente para otras personas ...