Material-ui: [Kisi] Lebar ekstra dari wadah & bilah gulir

Saya telah menemukan masalah yang sama di flexboxgrid . Saya pikir itu adalah batasan solusi margin negatif kami yang menerapkan spasi.
Saya telah memeriksa apa yang dilakukan bootstrap, mereka tidak memiliki fitur jarak ini, jadi tidak ada masalah di pihak mereka.

Jadi, Anda memiliki 3 solusi yang tersedia:

• Tidak menggunakan fitur spasi dan mengimplementasikannya pada userland spacing={0} , kita dapat menjadikan ini sebagai perilaku default.
• Menambahkan padding pada induk dengan, setidaknya, nilai jarak: https://codesandbox.io/s/WnpKlQ32n

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

• Menambahkan overflow-x: hidden; pada orang tua.

Saya menutup karena saya tidak bisa memikirkan alternatif yang lebih baik. Jika seseorang memiliki solusi yang lebih baik untuk fitur jarak, harap angkat suara Anda :).

Bagi saya, sepertinya spacing={0} harus menjadi perilaku default. Setidaknya sampai solusi yang lebih baik muncul, karena tampaknya bug dengan <Grid /> untuk pengguna pertama kali material-ui.

@hboylan Mengingat semua masalah yang terbuka untuk batasan ini, saya mulai bertanya-tanya! Saya berharap kami memiliki akses ke beberapa analisis penggunaan API 📈.

Saya telah menambahkan tag waiting for users upvotes . Saya tidak yakin orang lebih suka memiliki spacing={0} . Jadi tolong beri suara positif untuk masalah ini jika Anda. Kami akan memprioritaskan upaya kami berdasarkan jumlah suara positif.

Setidaknya 8 masalah duplikat adalah sinyal yang kuat. Saya akan menambahkan catatan tentang batasan ini di dokumentasi.

Hanya bertanya-tanya: Apakah ada peringatan menggunakan solusi kedua yang Anda jelaskan ?

Jika tidak, Anda dapat menambahkan ini di Grid-container-Component secara default?

memperbarui:
=> saya konyol;) tentu saja: kami kehilangan ruang, maaf.

Saya tidak dapat memperbaiki ini di material-ui @ next menggunakan spacing={0} dalam penampung, atau salah satu dari dua solusi lainnya termasuk overflowing-x dan semacamnya. Mungkin aku melewatkan sesuatu?

flexboxgrid (yang disebutkan @oliviertassinari memiliki masalah yang sama) memiliki garpu yang mengklaim telah memperbaikinya. https://github.com/kristoferjoseph/flexboxgrid/issues/144#issuecomment -321694572 Saya belum menggali kodenya, tetapi mungkin perlu diselidiki untuk melihat apakah ada sesuatu yang dapat kita gunakan di Grid.

Hai,

Kami baru-baru ini mulai mengadopsi perpustakaan ini untuk salah satu proyek kami.

Anda dapat membayangkan betapa terkejutnya kami ketika kami menemukan utas ini.

Pada dasarnya ini adalah bug yang ditutup dan tidak ada solusi untuk versi material-berikutnya. Ini mengkhawatirkan.
Yang lebih mengkhawatirkan adalah gagasan bahwa alih-alih memperbaiki bug ini, kami sekarang memiliki teks yang ditambahkan di dokumen yang berbicara tentang "batasan".

Apakah kalian memiliki prosedur terkait bug dan perbaikan bug? Atau apakah semuanya diputuskan saat itu juga?

Ini adalah prarilis 1.0.0:
https://github.com/mui-org/material-ui/issues?q=is%3Aopen+is%3Aissue+milestone%3Av1.0.0-prerelease

Ekstrapolasi dari utas ini, haruskah kita menganggap prarilis 1.0.0 sebenarnya memiliki lebih banyak bug daripada yang kita lihat di sana? (misalnya masalah ini)

Berapa banyak bug material-ui valid yang Anda tutup sejauh ini di github, dan alih-alih memperbaiki Anda menambahkan teks di dokumen?

Kalau tidak, kerangka kerjanya bagus. Prosedurnya yang agak mengkhawatirkan.

Terima kasih, dan saya minta maaf jika saya menyinggung siapa pun dan / atau jika saya bersikap agak kuat.

@tokopedia

akan kita asumsikan 1.0.0- prerelease beta sebenarnya memiliki banyak lagi bug dari apa yang kita lihat di sana?

Anda tentu harus (lihat: Masalah ). Dan Anda harus mengharapkan 1.0.0-rc.x memiliki bug juga, tetapi API sebagian besar akan stabil.

Waktu untuk tweet @ryanflorence sangat tepat.

Saya minta maaf jika saya menyinggung siapa pun dan / atau jika saya bersikap agak kuat.

Jika Anda tahu Anda terlihat agak kuat, jangan minta maaf; pikirkan kembali apa yang ingin Anda katakan, dan bagaimana Anda ingin mengatakannya. (Dan mungkin lihat seberapa besar nilai yang Anda peroleh dari open source, vs. berapa banyak Anda telah berkontribusi, dan putuskan apakah keluhan Anda memiliki bobot tertentu.)

Lebih baik lagi, jika solusi yang disediakan dalam dokumen tidak cukup, tetap menggunakan CSS dan lihat apakah Anda dapat mengatasi batasan yang mengganggu Anda.

@bobotoh

Terima kasih telah meluangkan waktu untuk membalas.

Anda tentu harus (lihat: Masalah). Dan Anda harus mengharapkan 1.0.0-rc.x memiliki bug juga, tetapi API sebagian besar akan stabil.

Senang mendengar sebagian besar API akan stabil. Seperti proyek apa pun, saya berasumsi akan ada berbagai masalah yang belum ditemukan.

Namun, saat ini solusi untuk masalah ini tidak berfungsi dan masalah itu sendiri ditutup.
Sesuai pesan Anda sebelumnya, garpu flexboxgrid ini mungkin memberikan solusi.
Saya akan berasumsi bahwa komitmen mulai dari 1 Agustus adalah yang harus dicari perbaikannya.

Jika solusi yang didokumentasikan tidak lagi berfungsi, (Saya menggunakan seluler saat ini, jadi tidak dapat menguji), maka masalah ini perlu dibuka kembali.

Terima kasih telah mencari perbaikan.

Saya tidak mengalami masalah btw, dan solusi saya adalah melakukan spacing={0} secara manual di setiap komponen <Grid container /> atau <Grid item container /> dalam kode saya.

@kmlx Saya telah berhasil menguji solusi yang disarankan dengan beta.22. Jangan ragu untuk melaporkan kembali jika Anda menemukan solusi permanen.

Saya menambahkan spacing={0} tetapi sebenarnya menginginkan jarak, jadi saya menambahkan padding, dan membuatnya hanya menambahkan padding di atas breakpoint sedang di mana itu menunjukkan dua kolom:

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

Kemudian saya menambahkan className={classes.dividerRight} ke kolom kiri (karena pembagi ada di sebelah kanan) dan className={classes.dividerLeft} ke kolom kanan

Baru saja mengalami masalah ini. Selesaikan dengan menambahkan css berikut ke wadah grid dan itu terlihat bagus

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

@martjoao Bagi saya ini mengakibatkan padding yang tidak diinginkan di sekitar bagian luar grid container saya (saya memiliki elemen di dalamnya yang harus rata dengan tepinya).

Solusi cepat dan kotor saya untuk ini adalah hanya membuang overflow-x: hidden; pada elemen tubuh. Tetapi pada browser tertentu (khususnya yang seluler) ketika Anda menggulir bilah gulir horizontal berkedip sebentar, menunjukkan kepada pengguna bahwa mereka dapat menggulir ke kanan. Ini masih tidak diinginkan bagi saya.

EDIT:

Lihat saja pendekatan overflow yang disebutkan di atas. Salahku.

Saya pikir perlu dicatat bahwa penggunaan yang dimaksudkan dari <Grid> adalah _not_ application / primary layout (misalnya, bilah aplikasi, bilah samping, area konten, dll.). Ini benar-benar dimaksudkan untuk mendistribusikan elemen konten dalam kisi (misalnya daftar profil). Dengan pemikiran tersebut, memberi jarak pada elemen dengan margin sehingga area kontennya tidak terpengaruh - sehingga Anda dapat, misalnya, menambahkan warna latar belakang atau batas - masuk akal.

Tetapi dokumentasi menyarankan bahwa elemen <Grid> harus digunakan untuk layout utama dengan memiliki keseluruhan bagian bernama "Layout" yang menjelaskan penggunaan <Grid> .

Alasan lain banyak orang menganggap ini berlawanan dengan intuisi adalah karena semua kerangka kerja UI lainnya menyediakan mekanisme untuk melakukan tata letak utama (yang akan dianggap kasus 80%, @oliviertassinari), dan meletakkan kisi item konten adalah perhatian sekunder.

Tetapi dokumentasinya menunjukkan bahwa fileelemen harus digunakan untuk tata letak utama dengan memiliki seluruh bagian bernama "Tata Letak" yang menjelaskan penggunaan.

@wmadden Mengapa menggunakan kata-kata tata letak membuat Anda berpikir ini tentang aplikasi / tata letak utama?

Alasan lain banyak orang menganggap ini berlawanan dengan intuisi

Apa yang berlawanan dengan intuisi?

yang akan dianggap sebagai kasus 80%

Saya setuju, kami memiliki: # 10986 untuk itu.

@wmadden Mengapa menggunakan kata-kata tata letak membuat Anda berpikir ini tentang aplikasi / tata letak utama?

Ini ada di bagian tingkat atas yang disebut "tata letak", bukan hanya demo komponen. Dan ungkapan seperti ini:

Grid menciptakan konsistensi visual antara tata letak sambil memungkinkan fleksibilitas di berbagai desain. UI responsif Desain Material didasarkan pada tata letak kisi 12 kolom.

membuat saya berasumsi bahwa itu tepat untuk digunakan untuk meletakkan aplikasi saya - di mana batasan margin negatif menjadi masalah dengan cepat.

Alasan lain banyak orang menganggap ini berlawanan dengan intuisi

Maksud saya, orang-orang menganggapnya berlawanan dengan intuisi bahwa komponen Grid tidak boleh digunakan untuk tata letak utama, karena kerangka kerja UI biasanya menyediakan solusi tata letak untuk tujuan itu - dan biasanya dalam topik dokumentasi tingkat atas yang disebut "tata letak".

Asumsi umum dalam React bahwa anak-anak akan dikurung oleh orang tua mereka. Margin negatif <Grid> mematahkan asumsi itu dengan melampaui batas induknya, yang membuat perilakunya tampak seperti bug bagi siapa pun yang tidak menyadari bahwa ini memang sengaja.

@ vedant1811 Margin negatif tidak lagi menjadi perilaku default. Anda harus dapat menggunakan Grid tanpa itu untuk tata letak level aplikasi Anda.

@oliviertassinari Apakah ada pembaruan yang mengubah ini? Hanya ingin tahu apakah saya perlu memperbarui versi paket saya. Saya menggunakan overflow: hidden; pada solusi elemen induk sebelumnya.

@saricden Ya, dengan tidak menyediakan properti spacing , sebagian besar pustaka kisi yang tersedia di luar sana tidak memiliki fitur ini, mereka membiarkan orang menangani margin.

Saya baru saja mengalami ini. Apa yang tampaknya menjadi solusi lain yang hacky tapi ok adalah dengan meletakkan lebar: 'calc (100% - 16px)' pada wadah kisi ... setidaknya untuk situasi saya pada ukuran layar kecil.

Bermain-main dengan lebar yang berbeda untuk breakpoint yang berbeda dapat meningkatkan ini, tetapi masalahnya jauh lebih tidak terlihat ketika layar menghasilkan wadah yang lebih luas.

Masih memiliki masalah yang sama, tetapi diperbaiki dengan menambahkan xs = {12}.
<Grid container spacing={3} xs={12}>

Masalah ini masih terjadi. Menambahkan spacing={...} menyebabkan gulungan horizontal. Menambahkan xs={12} tidak menyelesaikannya.

_Untuk apa nilainya: _
Saya mengalami masalah ini dengan Material-UI 4.5.0. Untuk beberapa alasan saya baru saja memperhatikan ini dan saya telah menggunakan Material-UI selama lebih dari setahun.

Saya mencoba saran xs={12} di atas selain gaya margin (karena saya melihat margin ekstra di sisi kanan), dan berikut ini menghasilkan efek yang diinginkan secara visual:

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

_However ..._ Saya mendapatkan peringatan di konsol:

Peringatan: Jenis properti yang gagal: Prop xs dari Grid harus digunakan pada item .

Jadi, alih-alih menggunakan xs={12} pada wadah, saya menyalin gaya yang ditambahkannya ke makeStyles() . Berikut ini tampaknya berhasil untuk saya sejauh ini:

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

Hanya maxWidth: 100% , yang membuat ini berhasil. namun, lebarnya sekarang ditarik hingga maksimum. ini tidak akan berfungsi jika saya menetapkan nilai maxWidth tertentu.

Saya telah memperbaikinya menggunakan komponen bergaya untuk mengatur margin wadah Grid ke nol.

Wadah kotak bergaya:

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

Sekarang GridContainer digunakan, sebagai ganti komponen Grid yang menghasilkan lebar ekstra.

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

Saya menggunakankomponen di dalam pembungkus lebar & tinggi 100%, tetapi saya mengalami masalah ini di mana wadah meregangkan halaman melewati 100vw dan menyebabkan luapan horizontal. Saya tidak mengerti mengapa margin negatif digunakan untuk ini? Saya harus mengganti gaya default untuk mengembalikan halaman ke dalam batas:

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

IMO harus dibuat sedikit lebih jelas bahwa wadah Grid tidak dimaksudkan untuk digunakan sebagai pembungkus aplikasi.

Dalam ukuran desktop saya memiliki gambar yang membentang ke samping dan diperbaiki dengan xs = {12} secara aneh membuat padding muncul. Dalam kasus saya, perbaikannya terlihat seperti solusi @martjoao tetapi hanya lebar ponsel:
gridSpacingFix: { '<strong i="7">@media</strong> (max-width:600px)': { width: '100% !important', margin: '0 !important', }, },

Saya menemui masalah serupa, dan diperbaiki oleh:

body { margin: 0; padding: 0; }

Akhirnya melakukan di bawah ini:

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

Ini menyelesaikan masalah.

hanya menghadapi masalah itu juga dan melihat jumlah masalah terkait, saya bertanya-tanya apakah masuk akal untuk memperbaikinya di material-ui.

Tidak bisakah kita pada dasarnya melakukan hal yang sama seperti yang mereka lakukan di sini: https://github.com/evgenyrodionov/flexboxgrid2/commit/37e02fec7674495782098fb8e9a2c6d20a2786e1#diff -4b62e0ae269a54df45ab5eab9cb7821b?

Mengalami masalah yang sama, menemukan semi-fix by doing

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

Masih memiliki masalah yang sama, tetapi diperbaiki dengan menambahkan xs = {12}.
<Grid container spacing={3} xs={12}>

Ini memperbaikinya untuk saya ... terima kasih!

Masih memiliki masalah yang sama, tetapi diperbaiki dengan menambahkan xs = {12}.
<Grid container spacing={3} xs={12}>

Ini memperbaikinya untuk saya ... terima kasih!

Solusi luar biasa! Ini juga memperbaikinya untuk kita. Kami harus menambahkan container item untuk mencegah peringatan kontainer + xs.

masalah teratasi setelah menambahkan overflow-x: hidden ; pada induknya, seperti di dalam Container memiliki mui-datatable, jadi menambahkan overflowX: 'hidden' ke container

Akhirnya melakukan di bawah ini:

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

Ini menyelesaikan masalah.

Terima kasih, ini adalah satu-satunya solusi yang berfungsi untuk saya.

_Seems_ bekerja bagi saya untuk menghilangkan margin 0 !important

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

Saya bingung karena kerangka kerja ui ini memiliki banyak bug. Anda

@Jamur_kejang

masalah teratasi setelah menambahkan overflow-x: hidden ; pada induknya, seperti di dalam Container memiliki mui-datatable, jadi menambahkan overflowX: 'hidden' ke container

Masalahnya adalah Anda masih bisa menggulir. overflow-x: hidden bukanlah solusi yang baik

MuiGrid: {
wadah: {
lebar: "100%! penting",
margin: "0! penting"
}
},
@ rachmawati.r
Ini secara paksa mengubah struktur seluruh kerangka kerja dan tidak disarankan. Anda mungkin memperbaikinya di satu tempat, merusaknya di tempat lain.

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

Saya terkejut, saya telah menggunakan MUI mungkin selama 2 tahun dan belum pernah melihat ini sebelumnya. Masih belum tahu mengapa itu terjadi.

Akhirnya melakukan di bawah ini:

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

Ini menyelesaikan masalah.

Solusi ini berhasil untuk saya.

Ini telah berlangsung lama sehingga harus menjadi bagian dari dokumentasi jika perbaikan tidak dapat segera dilakukan.

Apakah sudah ada perbaikan?
Saya mengalami masalah ini dan berpikir untuk menggunakan overflow-x: hidden , Bagaimana menurut Anda?

Masalahnya masih ada. Solusi overflow-x: properti tersembunyi di induk

Hanya peretasan lain untuk ini, yang berhasil untuk saya;)

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

2px itu tampaknya ditambahkan di suatu tempat di bawah definisi kisi saya, jadi nilai sebenarnya bisa berbeda untuk orang lain ...