Material-ui: [Grid] Largura extra do contêiner e barra de rolagem

Eu encontrei o mesmo problema no flexboxgrid . Eu acho que é uma limitação da nossa solução de margem negativa que implementa o espaçamento.
Eu verifiquei o que o bootstrap está fazendo, eles não têm esse recurso de espaçamento, então nenhum problema em sua extremidade.

Portanto, você tem 3 soluções alternativas disponíveis:

• Não usando o recurso de espaçamento e implementando-o no userland spacing={0} , poderíamos tornar este o comportamento padrão.
• Adicionando um preenchimento no pai com, pelo menos, o valor de espaçamento: https://codesandbox.io/s/WnpKlQ32n

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

• Adicionando overflow-x: hidden; no pai.

Estou encerrando porque não consigo pensar em uma alternativa melhor. Se alguém tiver uma solução melhor para o recurso de espaçamento, levante a voz :).

Para mim, parece que spacing={0} deve ser o comportamento padrão. Pelo menos até que uma solução melhor apareça, porque parece ser um bug com <Grid /> para usuários de primeira vez de material-ui.

@hboylan À luz de todas as questões abertas para essa limitação, estou começando a me perguntar! Gostaria de ter acesso a algumas análises de uso de API 📈.

Eu adicionei a tag waiting for users upvotes . Não tenho certeza se as pessoas prefeririam ter spacing={0} . Então, por favor, vote a favor deste problema se você estiver Priorizaremos nosso esforço com base no número de votos positivos.

Pelo menos 8 edições duplicadas é um sinal forte. Acrescentarei uma observação sobre essa limitação na documentação.

Apenas me perguntando: há alguma advertência ao usar a segunda solução alternativa que você descreveu ?

Se não, você poderia adicionar isso no Grid-container-Component por padrão?

atualizar:
=> tolo eu;) claro: estamos perdendo espaço, desculpe.

Não consigo consertar isso em material-ui @ next usando spacing={0} no contêiner, ou qualquer uma das outras duas soluções, incluindo overflowing-x e tal. Talvez eu esteja perdendo alguma coisa?

flexboxgrid (que @oliviertassinari mencionou ter os mesmos problemas) tem um fork que afirma ter corrigido. https://github.com/kristoferjoseph/flexboxgrid/issues/144#issuecomment -321694572 Eu não cavei no código, mas pode valer a pena investigar para ver se há algo que possamos usar no Grid.

Oi,

Recentemente, começamos a adotar essa biblioteca para um de nossos projetos.

Você pode imaginar nossa surpresa quando descobrimos este tópico.

Basicamente, este é um bug que foi fechado sem soluções alternativas a partir da última versão do material seguinte. Isso é preocupante.
Ainda mais preocupante é a ideia de que, em vez de corrigir esse bug, agora adicionamos um texto na documentação falando sobre "uma limitação".

Vocês têm algum procedimento em relação a bugs e correções de bugs? Ou tudo é decidido na hora?

Este é o pré-lançamento 1.0.0:
https://github.com/mui-org/material-ui/issues?q=is%3Aopen+is%3Aissue+milestone%3Av1.0.0-prerelease

Extrapolando a partir deste tópico, devemos assumir que o pré-lançamento 1.0.0 realmente tem muito mais bugs do que o que vemos lá? (ou seja, este problema, por exemplo)

Quantos bugs materiais-ui válidos vocês fecharam até agora no github e, em vez de corrigir, adicionaram texto aos documentos?

Caso contrário, a estrutura é ótima. São os procedimentos que preocupam um pouco.

Obrigado, e peço desculpas se ofendi alguém e / ou se gozei um pouco forte.

@kmlx

devemos supor que o beta de pré-lançamento 1.0.0 tem muito mais bugs do que o que vemos lá?

Você certamente deveria (veja: Problemas ). E você deve esperar que 1.0.0-rc.x também tenha bugs, mas a API será praticamente estável.

O momento de 's @ryanflorence Tweet é perfeita.

Peço desculpas se ofendi alguém e / ou se gozei um pouco forte.

Se você sabe que está parecendo um pouco forte, não se desculpe; repense o que você quer dizer e como você quer dizer. (E talvez dê uma olhada em quanto valor você obteve com o código aberto, em comparação com o quanto você contribuiu, e decida se sua reclamação tem algum peso.)

Melhor ainda, se as soluções alternativas fornecidas nos documentos não forem suficientes, prenda-se ao CSS e veja se consegue resolver a limitação que o está incomodando.

@mbrookes

Obrigado por responder.

Você certamente deveria (veja: Problemas). E você deve esperar que 1.0.0-rc.x também tenha bugs, mas a API será praticamente estável.

Fico feliz em saber que a API será praticamente estável. Como qualquer projeto, presumo que haverá vários problemas não descobertos.

Ainda assim, no momento, as soluções alternativas para esse problema não estão funcionando e o problema em si foi encerrado.
De acordo com sua mensagem anterior, este fork do flexboxgrid pode fornecer uma solução.
Devo assumir que os commits a partir de 1º de agosto são aqueles em que se deve procurar uma solução.

Se as soluções alternativas documentadas não estiverem mais funcionando (estou no celular no momento, portanto, não posso testar), esse problema precisa ser reaberto.

Obrigado por procurar uma solução.

Não estou tendo esse problema, e minha solução foi fazer manualmente spacing={0} em cada <Grid container /> ou <Grid item container /> componente em meu código.

@kmlx Testei com sucesso as soluções alternativas sugeridas com o beta.22. Sinta-se à vontade para relatar se você encontrar uma solução permanente.

Eu adicionei spacing={0} mas na verdade queria espaçamento, então adicionei preenchimento, e fiz apenas adicionar o preenchimento acima do ponto de interrupção médio, onde ele mostrava duas colunas:

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
    }
  },
});

Então adicionei className={classes.dividerRight} à coluna da esquerda (já que o divisor está à direita) e className={classes.dividerLeft} à coluna da direita

Só tive esse problema. Resolvido com a adição do seguinte css ao contêiner da grade e parece bom

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

@martjoao Para mim, isso resultou em um preenchimento indesejado ao redor da parte externa do meu contêiner de grade (tenho elementos internos que devem ficar alinhados com as bordas).

Minha solução rápida e suja para isso foi apenas jogar overflow-x: hidden; no elemento do corpo. Mas em certos navegadores (em particular os móveis), quando você rola a barra de rolagem horizontal pisca por um segundo, indicando ao usuário que ele pode rolar para a direita. Isso ainda é indesejável para mim.

EDITAR:

Acabei de ver que a abordagem de estouro foi mencionada acima. Foi mal.

Acho que vale a pena notar que o uso pretendido de <Grid> é _não_ layout de aplicativo / primário (por exemplo, barra de aplicativos, barra lateral, área de conteúdo, etc.). Ele realmente se destina a distribuir elementos de conteúdo em uma grade (por exemplo, uma lista de perfis). Com isso em mente, espaçar elementos com margens para que sua área de conteúdo não seja afetada - para que você possa, por exemplo, adicionar uma cor de fundo ou bordas - faz sentido.

Mas a documentação sugere que o elemento <Grid> deve ser usado para o layout primário, tendo uma seção inteira chamada "Layout" descrevendo o uso de <Grid> .

Outra razão pela qual muitas pessoas acham isso contra-intuitivo é porque todos os outros frameworks de IU fornecem um mecanismo para fazer o layout primário (que seria considerado o caso de 80%, @oliviertassinari), e o layout de uma grade de itens de conteúdo é uma preocupação secundária.

Mas a documentação sugere que oelemento deve ser usado para o layout principal, tendo uma seção inteira chamada "Layout" que descreve o uso de.

@wmadden Por que usar o texto do layout faz você pensar que se trata do aplicativo / layout principal?

Outra razão pela qual muitas pessoas acham isso contra-intuitivo

O que é contra-intuitivo?

que seria considerado o caso de 80%

Concordo, temos: # 10986 para isso.

@wmadden Por que usar o texto do layout faz você pensar que se trata do aplicativo / layout principal?

Ele está em uma seção de nível superior chamada "layout", em vez de apenas uma demonstração de componente. E frases assim:

A grade cria consistência visual entre layouts, permitindo flexibilidade em uma ampla variedade de designs. A IU responsiva do Material Design é baseada em um layout de grade de 12 colunas.

me fez supor que era apropriado usá-lo para definir meu aplicativo - onde a limitação da margem negativa se torna um problema rapidamente.

Outra razão pela qual muitas pessoas acham isso contra-intuitivo

Eu quis dizer que as pessoas acham contra-intuitivo que o componente Grid não deva ser usado para layout primário, uma vez que os frameworks de IU normalmente fornecem uma solução de layout para esse propósito - e geralmente está em um tópico de documentação de nível superior chamado "layout".

É uma suposição comum no React que os filhos serão controlados pelos pais. A margem negativa de <Grid> quebra essa suposição ao se estender além dos limites de seu pai, o que faz seu comportamento parecer um bug para qualquer pessoa que não saiba que é intencional.

@ vedant1811 A margem negativa não é mais o comportamento padrão. Você deve ser capaz de usar o Grid sem ele para o layout de nível de aplicativo.

@oliviertassinari Houve uma atualização que mudou isso? Só estou me perguntando se preciso atualizar minha versão do pacote. Eu estava usando overflow: hidden; na solução alternativa do elemento pai antes.

@saricden Sim, por não fornecer uma propriedade spacing , a maioria das bibliotecas de grade disponíveis não tem esse recurso, elas permitem que as pessoas lidem com a margem.

Eu apenas corri para isso. O que parece ser outra solução alternativa, mas ok, é colocar uma largura: 'calc (100% - 16px)' no contêiner de grade ... pelo menos para minha situação em telas pequenas.

Brincar com larguras diferentes para pontos de interrupção diferentes pode melhorar isso, mas o problema é bem menos perceptível quando a tela produz um recipiente mais amplo.

Ainda tem o mesmo problema, mas corrigido ao adicionar xs = {12}.
<Grid container spacing={3} xs={12}>

Esse problema ainda ocorre. Adicionar spacing={...} causa uma rolagem horizontal. Adicionar xs={12} não resolve.

_Pelo que vale a pena: _
Estou tendo esse problema com o Material-UI 4.5.0. Por alguma razão, estou apenas percebendo isso agora e estou usando o Material-UI há mais de um ano.

Tentei a sugestão xs={12} acima, além de um estilo de margem (porque eu estava vendo uma margem extra no lado direito), e o seguinte produziu o efeito desejado visualmente:

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

_Contudo ..._ Estou recebendo um aviso no console:

Aviso: Tipo de proposta com falha: a proposta xs de Grid deve ser usada em item .

Então, em vez de usar xs={12} no contêiner, copiei os estilos que ele estava adicionando a makeStyles() . O que segue parece estar funcionando para mim até agora:

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

É apenas maxWidth: 100% que fez este trabalho. no entanto, a largura agora está esticada ao máximo. isso não funcionará se eu definir um valor específico de maxWidth.

Corrigi isso usando componentes estilizados para definir a margem do contêiner de grade como zero.

Recipiente de grade estilizado:

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

Agora GridContainer é usado, em vez do componente Grid que estava gerando a largura extra.

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

Eu usei ocomponente dentro de um wrapper de 100% de largura e altura, mas encontrei este problema em que o contêiner estica a página além de 100vw e causa um estouro horizontal. Eu não entendo porque uma margem negativa é usada para isso? Tive que substituir os estilos padrão para trazer a página de volta aos limites:

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

IMO, deve ficar um pouco mais óbvio que os contêineres de grade não devem ser usados ​​como invólucro de um aplicativo.

No tamanho do desktop, tenho imagens estendidas para os lados e fixadas com xs = {12} estranhamente feito um preenchimento aparecer. No meu caso, a correção se parece com a solução de @martjoao , mas apenas largura móvel:
gridSpacingFix: { '<strong i="7">@media</strong> (max-width:600px)': { width: '100% !important', margin: '0 !important', }, },

Eu encontrei um problema semelhante e resolvido por:

body { margin: 0; padding: 0; }

Acabou fazendo abaixo:

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

Isso resolve o problema.

estava apenas enfrentando esse problema também e olhando para a quantidade de problemas relacionados, eu queria saber se faz sentido corrigir isso no material-ui.

Não poderíamos essencialmente fazer o mesmo que eles fazem aqui: https://github.com/evgenyrodionov/flexboxgrid2/commit/37e02fec7674495782098fb8e9a2c6d20a2786e1#diff -4b62e0ae269a54df45ab5eab9cb7821b?

Encontrei o mesmo problema, encontrei uma solução parcial ao fazer

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

Ainda tem o mesmo problema, mas corrigido ao adicionar xs = {12}.
<Grid container spacing={3} xs={12}>

Isso consertou para mim ... obrigado!

Ainda tem o mesmo problema, mas corrigido ao adicionar xs = {12}.
<Grid container spacing={3} xs={12}>

Isso consertou para mim ... obrigado!

Solução incrível! Isso também corrigiu para nós. Tivemos que adicionar container item para evitar um aviso de container + xs.

problema resolvido após adicionar overflow-x: hidden ; no pai, como dentro de Container, tem mui-datatable, então adicionamos overflowX: 'hidden' ao container

Acabou fazendo abaixo:

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

Isso resolve o problema.

Obrigado, esta foi a única solução que funcionou para mim.

_Parece_ funcionar para mim omitir margin 0 !important

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

Isso me deixa perplexo, essa estrutura de interface do usuário tem tantos bugs. Seu

@SomnathKadam

problema resolvido após adicionar overflow-x: hidden ; no pai, como dentro de Container, tem mui-datatable, então adicionamos overflowX: 'hidden' ao container

O problema com isso é que você ainda pode rolar. overflow-x: hidden não é uma boa solução

MuiGrid: {
container: {
largura: "100%! importante",
margem: "0! importante"
}
},
@ rag4214
Isso modifica forçosamente a estrutura de toda a estrutura e não é recomendado. Você pode consertar em um lugar, quebrá-lo em outro.

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

Estou chocado, uso o MUI há cerca de 2 anos e nunca tinha visto isso antes. Ainda não descobri por que isso aconteceu.

Acabou fazendo abaixo:

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

Isso resolve o problema.

Esta solução funciona para mim.

Isso vem acontecendo há tanto tempo que deve fazer parte da documentação se uma correção não for possível imediatamente.

Existe alguma correção ainda?
Estou tendo este problema e pensando em usar overflow-x: hidden , o que você acha?

O problema ainda está lá. A solução overflow-x: propriedade oculta no pai

Apenas mais um hack para isso, que funciona para mim;)

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

aqueles 2px parecem ser adicionados em algum lugar abaixo da minha definição de grade, então o valor real pode ser diferente para outras pessoas ...