Material-ui: [Gitter] Zusätzliche Breite des Containers und der Bildlaufleiste

Ich habe das gleiche Problem bei Flexboxgrid gefunden . Ich denke, dass es eine Einschränkung unserer negativen Margin-Lösung ist, die den Abstand implementiert.
Ich habe überprüft, was Bootstrap tut, sie haben diese Abstandsfunktion nicht, also kein Problem an ihrem Ende.

Sie haben also 3 Problemumgehungen zur Verfügung:

• Wenn Sie die Abstandsfunktion nicht verwenden und sie im Benutzerland spacing={0} implementieren, können Sie dies zum Standardverhalten machen.
• Hinzufügen einer Auffüllung des übergeordneten Elements mit mindestens dem Abstandswert: https://codesandbox.io/s/WnpKlQ32n

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

• Hinzufügen von overflow-x: hidden; zum übergeordneten Element.

Ich schließe, da ich mir keine bessere Alternative vorstellen kann. Wenn jemand eine bessere Lösung für die Abstandsfunktion hat, erheben Sie bitte Ihre Stimme :).

Mir scheint, dass spacing={0} das Standardverhalten sein sollte. Zumindest bis eine bessere Lösung gefunden wird, da es für Erstbenutzer von material-ui ein Fehler mit <Grid /> zu sein scheint.

@hboylan Angesichts all dieser Probleme, die für diese Einschränkung offen sind, frage ich mich! Ich wünschte, wir hätten Zugriff auf einige API-Nutzungsanalysen.

Ich habe das waiting for users upvotes -Tag hinzugefügt. Ich bin mir nicht sicher, ob die Leute es vorziehen würden, spacing={0} . Bitte stimmen Sie diesem Problem zu, wenn Sie es sind. Wir werden unsere Bemühungen anhand der Anzahl der Upvotes priorisieren.

Mindestens 8 doppelte Ausgaben sind ein starkes Signal. Ich werde einen Hinweis zu dieser Einschränkung in die Dokumentation aufnehmen.

Ich frage mich nur: Gibt es irgendwelche Einschränkungen bei der Verwendung der von Ihnen beschriebenen zweiten Problemumgehung ?

Wenn nicht, können Sie dies standardmäßig in die Grid-Container-Komponente einfügen?

aktualisieren:
=> dumm mich;) natürlich: wir verlieren den platz, sorry.

Ich kann dies in material-ui @ next nicht mit spacing={0} im Container oder einer der beiden anderen Lösungen, einschließlich overflowing-x und dergleichen, beheben. Vielleicht fehlt mir etwas?

flexboxgrid (von @oliviertassinari erwähnt, dass es dieselben Probleme gibt) hat eine Gabel, die behauptet, sie behoben zu haben. https://github.com/kristoferjoseph/flexboxgrid/issues/144#issuecomment -321694572 Ich habe mich nicht mit dem Code befasst, aber es könnte sich lohnen, zu untersuchen, ob wir etwas in Grid verwenden können.

Hallo,

Wir haben kürzlich begonnen, diese Bibliothek für eines unserer Projekte zu übernehmen.

Sie können sich unsere Überraschung vorstellen, als wir diesen Thread herausgefunden haben.

Grundsätzlich ist dies ein Fehler, der ab der neuesten Material-Next-Version ohne Problemumgehungen geschlossen wurde. Das ist besorgniserregend.
Noch besorgniserregender ist die Idee, dass anstatt diesen Fehler zu beheben, jetzt Text in den Dokumenten hinzugefügt wird, der von "einer Einschränkung" spricht.

Habt ihr irgendwelche Verfahren bezüglich Bugs und Bugfixes? Oder ist alles vor Ort entschieden?

Dies ist die 1.0.0-Vorabversion:
https://github.com/mui-org/material-ui/issues?q=is%3Aopen+is%3Aissue+milestone%3Av1.0.0-prerelease

Wenn wir aus diesem Thread extrapolieren, nehmen wir an, dass 1.0.0-Prerelease tatsächlich viel mehr Fehler aufweist als das, was wir dort sehen? (dh dieses Problem zum Beispiel)

Wie viele gültige Material-UI-Fehler haben Sie bisher auf Github geschlossen, und anstatt sie zu beheben, haben Sie Text in die Dokumente eingefügt?

Ansonsten ist der Rahmen super. Es sind die Verfahren, die etwas besorgniserregend sind.

Vielen Dank und ich entschuldige mich, wenn ich jemanden beleidigt habe und / oder wenn ich ein bisschen stark geworden bin.

@kmlx

Nehmen wir an, dass 1.0.0 - Prerelease Beta tatsächlich viel mehr Fehler aufweist als das, was wir dort sehen?

Sie sollten auf jeden Fall (siehe: Probleme ). Und Sie sollten erwarten, dass 1.0.0-rc.x auch Fehler aufweist, aber die API wird größtenteils stabil sein.

Das Timing von @ryanflorence 's Tweet ist perfekt.

Ich entschuldige mich, wenn ich jemanden beleidigt habe und / oder wenn ich ein bisschen stark geworden bin.

Wenn Sie wissen, dass Sie ein bisschen stark sind, entschuldigen Sie sich nicht. Überdenken Sie, was Sie sagen möchten und wie Sie es sagen möchten. (Und vielleicht werfen Sie einen Blick darauf, wie viel Wert Sie aus Open Source ziehen und wie viel Sie beigetragen haben, und entscheiden Sie, ob Ihre Beschwerde Gewicht hat.)

Besser noch, wenn die in den Dokumenten bereitgestellten Problemumgehungen nicht ausreichen, bleiben Sie beim CSS und prüfen Sie, ob Sie die Einschränkung beheben können, die Sie stört.

@mbrookes

Vielen Dank, dass Sie sich die Zeit genommen haben, um zu antworten.

Sie sollten auf jeden Fall (siehe: Probleme). Und Sie sollten erwarten, dass 1.0.0-rc.x auch Fehler aufweist, aber die API wird größtenteils stabil sein.

Ich bin froh zu hören, dass die API größtenteils stabil sein wird. Wie bei jedem Projekt gehe ich davon aus, dass es verschiedene unentdeckte Probleme geben wird.

Derzeit funktionieren die Problemumgehungen für dieses Problem jedoch nicht und das Problem selbst ist geschlossen.
Gemäß Ihrer vorherigen Nachricht bietet
Ich gehe davon aus, dass die Commits ab dem 1. August diejenigen sind, bei denen man nach einer Lösung suchen sollte.

Wenn die dokumentierten Problemumgehungen nicht mehr funktionieren (ich bin derzeit auf dem Handy und kann daher nicht testen), muss dieses Problem erneut geöffnet werden.

Vielen Dank, dass Sie sich um eine Lösung gekümmert haben.

Ich habe das Problem übrigens nicht und meine Lösung bestand darin, spacing={0} in jeder <Grid container /> oder <Grid item container /> Komponente in meinem Code manuell auszuführen.

@kmlx Ich habe die vorgeschlagenen Problemumgehungen mit Beta.22 erfolgreich getestet. Sie können sich gerne melden, wenn Sie eine dauerhafte Lösung finden.

Ich habe spacing={0} hinzugefügt, wollte aber tatsächlich einen Abstand, also habe ich Polsterung hinzugefügt und nur die Polsterung über dem mittleren Haltepunkt hinzugefügt, an dem zwei Spalten angezeigt wurden:

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

Dann habe ich der linken Spalte className={classes.dividerRight} hinzugefügt (da sich der Teiler rechts befindet) und der rechten Spalte className={classes.dividerLeft}

Hatte gerade dieses Problem. Es wurde behoben, indem das folgende CSS zum Container des Rasters hinzugefügt wurde, und es sieht gut aus

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

@martjoao Für mich führte dies zu unerwünschten Gittercontainers (ich habe Elemente im Inneren, die bündig mit den Kanten sein sollten).

Meine schnelle und schmutzige Lösung bestand darin, einfach overflow-x: hidden; auf das Körperelement zu werfen. Bei bestimmten Browsern (insbesondere bei mobilen Browsern) blinkt die horizontale Bildlaufleiste beim Scrollen eine Sekunde lang und zeigt dem Benutzer an, dass sie nach rechts scrollen können. Das ist für mich immer noch unerwünscht.

BEARBEITEN:

Ich habe gerade gesehen, dass der Überlaufansatz oben erwähnt wurde. Mein Fehler.

Ich denke, es ist erwähnenswert, dass die beabsichtigte Verwendung von <Grid> _nicht_ Anwendung / primäres Layout ist (z. B. App-Leiste, Seitenleiste, Inhaltsbereich usw.). Es ist wirklich zum Verteilen von Inhaltselementen in einem Raster gedacht (z. B. eine Liste von Profilen). In diesem Sinne ist es sinnvoll, Elemente mit Rändern so anzuordnen, dass ihr Inhaltsbereich nicht beeinträchtigt wird - Sie können also beispielsweise eine Hintergrundfarbe oder Rahmen hinzufügen.

In der Dokumentation wird jedoch vorgeschlagen, das Element <Grid> für das primäre Layout zu verwenden, indem ein ganzer Abschnitt mit dem Namen "Layout" verwendet wird, in dem die Verwendung von <Grid> .

Ein weiterer Grund, warum viele Leute dies als nicht intuitiv empfinden, ist, dass alle anderen UI-Frameworks einen Mechanismus für die Erstellung des primären Layouts bieten (was als 80% -Fall @oliviertassinari angesehen wird) und das Erstellen eines Rasters von Inhaltselementen ein zweitrangiges Anliegen ist.

Aber die Dokumentation legt nahe, dass dieDas Element sollte für das primäre Layout verwendet werden, indem ein ganzer Abschnitt mit dem Namen "Layout" die Verwendung von beschreibt.

@wmadden Warum denken Sie bei der Verwendung des Layout-Wortlauts, dass es sich um die App / das primäre Layout handelt?

Ein weiterer Grund, warum viele Menschen dies nicht intuitiv finden

Was ist nicht intuitiv?

das wäre der 80% Fall

Ich stimme zu, wir haben: # 10986 dafür.

@wmadden Warum denken Sie bei der Verwendung des Layout-Wortlauts, dass es sich um die App / das primäre Layout handelt?

Es befindet sich in einem Abschnitt der obersten Ebene namens "Layout" und nicht nur in einer Komponentendemo. Und so formulieren:

Das Raster schafft visuelle Konsistenz zwischen den Layouts und ermöglicht gleichzeitig Flexibilität für eine Vielzahl von Designs. Die reaktionsschnelle Benutzeroberfläche von Material Design basiert auf einem 12-Spalten-Rasterlayout.

Ich nahm an, dass es angemessen war, es für die Gestaltung meiner Bewerbung zu verwenden - wo die negative Margenbegrenzung schnell zu einem Problem wird.

Ein weiterer Grund, warum viele Menschen dies nicht intuitiv finden

Ich meinte, die Leute finden es nicht intuitiv, dass die Grid-Komponente nicht für das primäre Layout verwendet werden sollte, da UI-Frameworks normalerweise eine Layoutlösung für diesen Zweck bieten - und dies normalerweise in einem Dokumentationsthema der obersten Ebene namens "Layout".

In React wird häufig davon ausgegangen, dass Kinder von ihren Eltern eingeschlossen werden. Der negative Rand des <Grid> bricht diese Annahme, indem er sich über die Grenzen seines übergeordneten Elements hinaus erstreckt, wodurch sein Verhalten für jeden, der nicht weiß, dass es beabsichtigt ist, wie ein Fehler aussieht.

@ vedant1811 Der negative Rand ist nicht mehr das Standardverhalten. Sie sollten in der Lage sein, das Raster ohne es für Ihr Layout auf Anwendungsebene zu verwenden.

@oliviertassinari Gab es ein Update, das dies geändert hat? Ich frage mich nur, ob ich meine Version des Pakets aktualisieren muss. Ich habe zuvor overflow: hidden; für die Problemumgehung des übergeordneten Elements verwendet.

@saricden Ja, da keine spacing -Eigenschaft angegeben wird , Rasterbibliotheken nicht über diese Funktion. Sie ermöglichen es den Benutzern, den Rand zu verwalten.

Ich bin gerade darauf gestoßen. Was eine weitere hackige, aber gute Lösung zu sein scheint, ist, eine Breite: 'calc (100% - 16px)' auf den Gittercontainer zu setzen ... zumindest für meine Situation bei kleinen Bildschirmgrößen.

Das Herumspielen mit unterschiedlichen Breiten für unterschiedliche Haltepunkte kann dies verbessern, aber das Problem ist weitaus weniger auffällig, wenn der Bildschirm einen breiteren Container ergibt.

Habe immer noch das gleiche Problem, aber durch Hinzufügen von xs = {12} behoben.
<Grid container spacing={3} xs={12}>

Dieses Problem tritt weiterhin auf. Das Hinzufügen von spacing={...} führt zu einem horizontalen Bildlauf. Das Hinzufügen von xs={12} löst das Problem nicht.

_Für was es wert ist: _
Ich stoße auf dieses Problem mit Material-UI 4.5.0. Aus irgendeinem Grund merke ich das gerade und benutze Material-UI seit über einem Jahr.

Ich habe den obigen Vorschlag xs={12} zusätzlich zu einem Randstil ausprobiert (weil ich auf der rechten Seite einen zusätzlichen Rand sah), und der folgende Effekt erzeugt den gewünschten Effekt visuell:

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

_Jedoch ..._ Ich erhalte eine Warnung in der Konsole:

Warnung: Fehlgeschlagener Requisitentyp: Die Requisite xs von Grid muss für item .

Anstatt xs={12} für den Container zu verwenden, habe ich die Stile, die hinzugefügt wurden, zu makeStyles() kopiert. Folgendes scheint mir bisher den Trick zu tun:

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

Es ist nur maxWidth: 100% , das diese Arbeit gemacht hat. Die Breite ist jetzt jedoch maximal gedehnt. Dies wird nicht funktionieren, wenn ich einen bestimmten maxWidth-Wert eingestellt habe.

Ich habe dies mithilfe von gestalteten Komponenten behoben, um den Rand des Rastercontainers auf Null zu setzen.

Gestylter Gitterbehälter:

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

Jetzt wird GridContainer anstelle der Grid-Komponente verwendet, die die zusätzliche Breite generiert hat.

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

Ich habe das benutztKomponente innerhalb eines Wrappers mit 100% Breite und Höhe, aber ich bin auf dieses Problem gestoßen, bei dem der Container die Seite über 100 VW hinaus ausdehnt und einen horizontalen Überlauf verursacht. Ich verstehe nicht, warum dafür eine negative Marge verwendet wird? Ich musste die Standardstile überschreiben, um die Seite wieder in Grenzen zu bringen:

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

IMO sollte etwas deutlicher gemacht werden, dass Grid-Container nicht als Wrapper einer Anwendung verwendet werden sollen.

In der Desktop-Größe habe ich Bilder, die sich zur Seite erstrecken und mit xs = {12} seltsamerweise eine Polsterung erscheinen lassen. In meinem Fall sieht das Update wie die Lösung von
gridSpacingFix: { '<strong i="7">@media</strong> (max-width:600px)': { width: '100% !important', margin: '0 !important', }, },

Ich habe ein ähnliches Problem festgestellt und es behoben durch:

body { margin: 0; padding: 0; }

Endete unten:

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

Dies löst das Problem.

Ich habe mich auch gefragt, ob es sinnvoll ist, dies in material-ui zu beheben.

Könnten wir nicht im Wesentlichen dasselbe tun wie hier: https://github.com/evgenyrodionov/flexboxgrid2/commit/37e02fec7674495782098fb8e9a2c6d20a2786e1#diff -4b62e0ae269a54df45ab5eab9cb7821b?

Bin auf das gleiche Problem gestoßen und habe dabei einen Semi-Fix gefunden

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

Habe immer noch das gleiche Problem, aber durch Hinzufügen von xs = {12} behoben.
<Grid container spacing={3} xs={12}>

Das hat es für mich behoben ... danke!

Habe immer noch das gleiche Problem, aber durch Hinzufügen von xs = {12} behoben.
<Grid container spacing={3} xs={12}>

Das hat es für mich behoben ... danke!

Tolle Lösung! Das hat es auch für uns behoben. Wir mussten container item hinzufügen, um eine Container + xs-Warnung zu verhindern.

Problem behoben, nachdem overflow-x: hidden hinzugefügt wurde; auf dem übergeordneten, wie in Container haben mui-datatable, also overflowX: 'hidden' zum Container hinzugefügt

Endete unten:

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

Dies löst das Problem.

Danke, das war die einzige funktionierende Lösung für mich.

_Scheint_ für mich zu arbeiten, um die margin 0 !important wegzulassen

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

Es verwirrt mich, dass dieses UI-Framework so viele Fehler hat. Ihre

@ SomnathKadam

Problem behoben, nachdem overflow-x: hidden hinzugefügt wurde; auf dem übergeordneten, wie in Container haben mui-datatable, also overflowX: 'hidden' zum Container hinzugefügt

Das Problem dabei ist, dass Sie immer noch scrollen können. overflow-x: versteckt ist keine gute lösung

MuiGrid: {
Container: {
Breite: "100%! wichtig",
Rand: "0! wichtig"
}}
},
@ rag4214
Dies ändert gewaltsam die Struktur des gesamten Frameworks und wird nicht empfohlen. Sie können es an einer Stelle reparieren, an einer anderen brechen.

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

Ich bin schockiert, ich benutze MUI seit vielleicht 2 Jahren und habe das noch nie gesehen. Immer noch nicht geklärt, warum es passiert ist.

Endete unten:

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

Dies löst das Problem.

Diese Lösung funktioniert bei mir.

Dies ist so lange so, dass es Teil der Dokumentation sein sollte, wenn eine Korrektur nicht sofort möglich ist.

Gibt es schon eine Lösung?
Ich habe dieses Problem und denke darüber nach, overflow-x: hidden . Was denkst du?

Das Problem besteht immer noch. Die Lösung overflow-x: versteckte Eigenschaft auf dem übergeordneten Element

Nur ein weiterer Hack dafür, der bei mir funktioniert;)

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

Diese 2px scheinen irgendwo unterhalb meiner Rasterdefinition hinzugefügt zu werden, sodass der tatsächliche Wert für andere Personen unterschiedlich sein kann ...