Material-ui: [ग्रिड] कंटेनर और स्क्रॉलबार की अतिरिक्त चौड़ाई

मुझे फ्लेक्सबॉक्सग्रिड पर एक ही मुद्दा मिला है। मुझे लगता है कि यह हमारे नकारात्मक मार्जिन समाधान की एक सीमा है जो रिक्ति को लागू करता है।
मैंने जांच की है कि बूटस्ट्रैप क्या कर रहा है, उनके पास यह रिक्ति सुविधा नहीं है, इसलिए उनके अंत में कोई समस्या नहीं है।

तो आप 3 उपलब्ध workarounds है:

• रिक्ति सुविधा का उपयोग नहीं करने और उपयोगकर्ता के spacing={0} पर इसे लागू करने पर, हम इसे डिफ़ॉल्ट व्यवहार बना सकते हैं।
• माता-पिता के साथ कम से कम, रिक्ति मान को जोड़कर: https://codesandbox.io/s/WnpKlQ32n

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

• माता-पिता पर overflow-x: hidden; जोड़ना।

मैं बंद कर रहा हूं क्योंकि मैं एक बेहतर विकल्प के बारे में नहीं सोच सकता। यदि किसी के पास रिक्ति सुविधा के लिए बेहतर समाधान है, तो कृपया अपनी आवाज़ बढ़ाएं :)।

मेरे लिए, ऐसा लगता है कि spacing={0} डिफ़ॉल्ट व्यवहार होना चाहिए। कम से कम जब तक एक बेहतर समाधान नहीं आता है, क्योंकि यह सामग्री-उई के पहली बार <Grid /> बग के साथ प्रतीत होता है।

@hboylan इस सीमा के लिए खुले उन सभी मुद्दों के प्रकाश में, मुझे आश्चर्य हो रहा है! काश, हमारे पास कुछ एपीआई उपयोग विश्लेषण we की पहुंच होती।

मैंने waiting for users upvotes टैग जोड़े हैं। मुझे यकीन नहीं है कि लोग spacing={0} पसंद करेंगे। यदि आप हैं तो कृपया इस मुद्दे को बढ़ाएँ। हम upvotes की संख्या के आधार पर अपने प्रयास को प्राथमिकता देंगे।

कम से कम 8 डुप्लिकेट मुद्दे एक मजबूत संकेत है। मैं प्रलेखन में इस सीमा के बारे में एक नोट जोड़ूंगा।

बस सोच रहा था: क्या आपके द्वारा वर्णित 2 के वर्कअराउंड का उपयोग करने के लिए कोई चेतावनी है?

यदि नहीं, तो आप इसे ग्रिड-कंटेनर-घटक प्रति डिफ़ॉल्ट में जोड़ सकते हैं?

अपडेट करें:
=> मुझे मूर्ख;) बेशक: हम स्थान खो रहे हैं, क्षमा करें।

मैं कंटेनर में spacing={0} का उपयोग करके सामग्री-उई @ में इसे ठीक करने में असमर्थ हूं, या किसी भी अन्य दो समाधानों में अतिप्रवाह-एक्स और जैसे। शायद मुझे कुछ याद आ रहा है?

flexboxgrid (जिसमें @oliviertassinari में समान मुद्दों का उल्लेख किया गया है) में एक कांटा है जो इसे तय करने का दावा करता है। https://github.com/kristoferjoseph/flexboxgrid/issues/144#issuecomment -321694572 मैंने कोड में नहीं खोदा है, लेकिन यह देखने के लिए जांच के लायक हो सकता है कि क्या हम ग्रिड में उपयोग कर सकते हैं।

नमस्ते,

हमने हाल ही में अपनी एक परियोजना के लिए इस पुस्तकालय को अपनाना शुरू किया।

आप हमारे आश्चर्य की कल्पना कर सकते हैं जब हमें इस धागे का पता चला।

मूल रूप से यह एक बग है जो नवीनतम सामग्री-अगले संस्करण के रूप में बिना किसी वर्कआर्डर के बंद है। यह चिंताजनक है।
इससे भी अधिक चिंता की बात यह है कि इस बग को ठीक करने के बजाय, हमने अब डॉक्स में "सीमा" के बारे में बात करते हुए पाठ जोड़ा है।

क्या आप लोगों के पास बग्स और बगफिक्स के बारे में कोई प्रक्रिया है? या सब कुछ मौके पर तय किया गया है?

यह 1.0.0-प्रीलेरेज़ है:
https://github.com/mui-org/material-ui/issues?q=is%3Aopen+is%3Aissue+milestone%3Av1.0.0-prerelease

इस थ्रेड से विस्तार करते हुए, क्या हम यह मानेंगे कि वास्तव में हमने जो देखा है, उसकी तुलना में वास्तव में बहुत अधिक कीड़े हैं? (उदाहरण के लिए यह मुद्दा)

जीथब पर अब तक कितने वैध सामग्री-यूआई कीड़े आप लोगों ने बंद कर दिए, और फिक्सिंग के बजाय आपने डॉक्स में पाठ जोड़ा?

अन्यथा ढांचा महान है। यह ऐसी प्रक्रियाएं हैं जो थोड़ी चिंताजनक हैं।

धन्यवाद, और मैं माफी माँगता हूँ अगर मैंने किसी को नाराज किया और / या अगर मैं थोड़ा मजबूत आया।

@kmlx

हम यह मान जाएगा 1.0.0- प्री-रिलीज़ बीटा वास्तव में क्या हम वहाँ देखने की तुलना में बहुत अधिक कीड़े है?

आपको निश्चित रूप से (देखें: मुद्दे ) चाहिए। और आपको अपेक्षा करनी चाहिए कि 1.0.0-rc.x में बग भी हों, लेकिन एपीआई ज्यादातर स्थिर होगी।

@Ryanflorence के ट्वीट का समय एकदम सही है।

मैं माफी मांगता हूं अगर मैंने किसी को नाराज किया और / या अगर मैं थोड़ा मजबूत आया।

यदि आप जानते हैं कि आप थोड़ा मजबूत हो रहे हैं, तो माफी न माँगें; जो आप कहना चाहते हैं, उस पर पुनर्विचार करें और आप इसे कैसे कहना चाहते हैं। (और शायद इस बात पर ध्यान दें कि आप खुले स्रोत से कितने मूल्य पर निकले हैं, बनाम आपने कितना योगदान दिया है, और यह तय करें कि आपकी शिकायत आपके वजन को बढ़ाती है या नहीं।)

बेहतर अभी भी, अगर डॉक्स में दिए गए वर्कअराउंड पर्याप्त नहीं हैं, तो सीएसएस से चिपके रहें और देखें कि क्या आप उस सीमा को हल कर सकते हैं जो आपको परेशान कर रही है।

@mbrookes

जवाब देने का समय निकालने के लिए आपका धन्यवाद।

आपको निश्चित रूप से (देखें: मुद्दे) चाहिए। और आपको अपेक्षा करनी चाहिए कि 1.0.0-rc.x में बग भी हों, लेकिन एपीआई ज्यादातर स्थिर होगी।

एपीआई को सुनने की खुशी ज्यादातर स्थिर होगी। किसी भी परियोजना के रूप में, मुझे लगता है कि विभिन्न अनदेखे मुद्दे होंगे।

फिर भी, इस समय इस समस्या के लिए वर्कअराउंड काम नहीं कर रहे हैं और समस्या स्वयं बंद हो गई है।
आपके पिछले संदेश के अनुसार, यह flexboxgrid कांटा एक समाधान प्रदान कर सकता है।
मुझे लगता है कि 1 अगस्त से शुरू होने वाले कमिट्स वही हैं जहां एक को ठीक करने की तलाश में होना चाहिए।

यदि प्रलेखित वर्कअराउंड अब काम नहीं कर रहा है, (मैं वर्तमान में मोबाइल पर हूं, इसलिए परीक्षण करने में सक्षम नहीं है), तो इस मुद्दे को फिर से खोलने की आवश्यकता है।

एक फिक्स में देखने के लिए धन्यवाद।

मुझे समस्या btw नहीं आ रही है, और मेरा समाधान मेरे कोड में spacing={0} प्रत्येक <Grid container /> या <Grid item container /> घटक को मैन्युअल रूप से करना था।

@kmlx मैंने

मैंने spacing={0} जोड़ा, लेकिन वास्तव में रिक्ति चाहता था, इसलिए मैंने पैडिंग को जोड़ा, और इसे केवल मध्यम ब्रेकपॉइंट के ऊपर पैडिंग को जोड़ा जहां यह दो कॉलम दिखा:

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

फिर मैंने बाएं कॉलम में className={classes.dividerRight} जोड़ा (क्योंकि डिवाइडर दाईं ओर है) और className={classes.dividerLeft} दाहिने कॉलम में

बस यह मुद्दा था। ग्रिड के कंटेनर में निम्नलिखित सीएसएस को जोड़ने के साथ इसे हल किया और यह अच्छा लग रहा है

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

@martjoao मेरे लिए यह मेरे ग्रिड कंटेनर के बाहर अवांछित पैडिंग के परिणामस्वरूप (मेरे अंदर तत्व हैं जो किनारों के साथ फ्लश होना चाहिए)।

इसका मेरा त्वरित और गंदा समाधान सिर्फ शरीर के तत्व पर overflow-x: hidden; फेंकना था। लेकिन कुछ ब्राउज़रों (विशेष रूप से मोबाइल) पर जब आप एक दूसरे के लिए क्षैतिज स्क्रॉलबार फ्लैश स्क्रॉल करते हैं, तो उपयोगकर्ता को इंगित करता है कि वे सही स्क्रॉल कर सकते हैं। यह अभी भी मेरे लिए अवांछनीय है।

संपादित करें:

बस देखा गया कि ओवरफ्लो का तरीका ऊपर बताया गया है। मेरी गलती।

मुझे लगता है कि यह ध्यान देने योग्य है कि <Grid> का उपयोग _not_ एप्लिकेशन / प्राथमिक लेआउट (जैसे ऐप बार, साइड बार, सामग्री क्षेत्र आदि) है। यह वास्तव में एक ग्रिड में सामग्री तत्वों को वितरित करने के लिए अभिप्रेत है (उदाहरण के लिए प्रोफाइल की एक सूची)। इसे ध्यान में रखते हुए, मार्जिन के साथ तत्वों को फैलाना ताकि उनका सामग्री क्षेत्र प्रभावित न हो - इसलिए आप उदाहरण के लिए पृष्ठभूमि का रंग या सीमाएँ जोड़ सकते हैं - समझ में आता है।

लेकिन प्रलेखन से पता चलता है कि <Grid> तत्व का उपयोग प्राथमिक लेआउट के लिए किया जाना चाहिए, जिसमें "लेआउट" नाम का एक पूरा अनुभाग <Grid> के उपयोग का वर्णन करता है।

एक और कारण बहुत से लोग इस प्रतिवाद को पाते हैं क्योंकि सभी अन्य यूआई फ्रेमवर्क प्राथमिक लेआउट करने के लिए एक तंत्र प्रदान करते हैं (जिसे 80% केस, @oliviertassinari माना जाएगा), और सामग्री आइटम का ग्रिड बिछाने एक माध्यमिक चिंता का विषय है।

लेकिन प्रलेखन से पता चलता है किप्राथमिक लेआउट के लिए तत्व का उपयोग किया जाना चाहिए, जिसमें "लेआउट" नाम का एक पूरा अनुभाग होता है, जिसके उपयोग का वर्णन है।

@wmadden लेआउट शब्द का उपयोग क्यों कर रहा है आपको लगता है कि यह ऐप / प्राथमिक लेआउट के बारे में है?

एक और कारण है कि बहुत से लोग इस प्रतिवाद को पाते हैं

क्या प्रतिवाद है?

जिसे 80% मामला माना जाएगा

मैं सहमत हूं, हमारे पास: इसके लिए # 10986 है।

@wmadden लेआउट शब्द का उपयोग क्यों कर रहा है आपको लगता है कि यह ऐप / प्राथमिक लेआउट के बारे में है?

यह केवल एक घटक डेमो के बजाय "लेआउट" नामक एक शीर्ष-स्तरीय अनुभाग में है। और इस तरह से बनाए रखना:

ग्रिड विभिन्न प्रकार के डिजाइनों में लचीलेपन की अनुमति देते हुए लेआउट के बीच दृश्य स्थिरता बनाता है। सामग्री डिजाइन की उत्तरदायी यूआई 12-कॉलम ग्रिड लेआउट पर आधारित है।

मुझे लगता है कि यह मेरे आवेदन बाहर बिछाने के लिए उपयोग करने के लिए उपयुक्त था - जहां नकारात्मक मार्जिन सीमा तेजी से एक समस्या बन जाती है।

एक और कारण है कि बहुत से लोग इस प्रतिवाद को पाते हैं

मेरा मतलब था कि लोगों को यह स्पष्ट लगता है कि ग्रिड घटक का उपयोग प्राथमिक लेआउट के लिए नहीं किया जाना चाहिए, क्योंकि यूआई फ्रेमवर्क आमतौर पर उस उद्देश्य के लिए एक लेआउट समाधान प्रदान करते हैं - और यह आमतौर पर "लेआउट" नामक एक शीर्ष-स्तरीय प्रलेखन विषय में होता है।

यह रिएक्ट में एक आम धारणा है कि बच्चे अपने माता-पिता द्वारा निहित होंगे। <Grid> का नकारात्मक मार्जिन अपने माता-पिता की सीमाओं से परे विस्तार करके उस धारणा को तोड़ता है, जो इसके व्यवहार को बग के समान दिखता है जो किसी को पता नहीं है कि यह डिजाइन द्वारा है।

@ vedant1811 नकारात्मक मार्जिन अब डिफ़ॉल्ट व्यवहार नहीं है। आपको अपने एप्लिकेशन स्तर लेआउट के लिए ग्रिड का उपयोग करने में सक्षम होना चाहिए।

@oliviertassinari क्या कोई अपडेट था जिसने इसे बदल दिया? अगर पैकेज के अपने संस्करण को अपडेट करने की आवश्यकता है तो बस सोच रहा हूं। मैं मूल तत्व वर्कअराउंड पर overflow: hidden; का उपयोग कर रहा था।

@saricden हाँ, spacing प्रॉपर्टी प्रदान न करके, वहाँ उपलब्ध अधिकांश ग्रिड लाइब्रेरीज़ में यह सुविधा नहीं है, वे लोगों को मार्जिन को संभालने देती हैं।

मैं बस इसमें भाग गया। लगता है कि एक और हैकरी है, लेकिन ठीक है वर्कअराउंड चौड़ाई डालने के लिए है: ग्रिड कंटेनर पर 'कैल्क (100% - 16px)' ... कम से कम मेरी स्थिति के लिए छोटे स्क्रीन आकारों पर।

अलग-अलग ब्रेकप्वाइंट के लिए अलग-अलग चौड़ाई के साथ खेलने से इसमें सुधार हो सकता है, लेकिन जब स्क्रीन एक व्यापक कंटेनर की पैदावार करता है तो यह समस्या बहुत कम दिखाई देती है।

अभी भी एक ही मुद्दा है, लेकिन x = {12} जोड़कर तय किया गया है।
<Grid container spacing={3} xs={12}>

यह समस्या अभी भी होती है। spacing={...} जोड़ने से क्षैतिज स्क्रॉल होता है। xs={12} जोड़ना इसका समाधान नहीं करता है।

_हांलांकि इसकी कीमत के बारे निश्चित नहीं हूँ:_
मैं सामग्री-यूआई 4.5.0 के साथ इस मुद्दे पर चल रहा हूं। किसी कारण के लिए मैं अभी यह देख रहा हूँ और मैं एक साल से अधिक सामग्री-यूआई का उपयोग कर रहा हूँ।

मैंने मार्जिन शैली के अतिरिक्त xs={12} सुझाव देने की कोशिश की (क्योंकि मैं दाईं ओर अतिरिक्त मार्जिन देख रहा था), और निम्नलिखित वांछित प्रभाव नेत्रहीन पैदा करता है:

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

_जब भी ..._ मुझे सांत्वना में चेतावनी मिल रही है:

चेतावनी: विफल प्रोप प्रकार: प्रोप xs Grid का उपयोग item पर किया जाना चाहिए।

इसलिए कंटेनर पर xs={12} का उपयोग करने के बजाय, मैंने उन शैलियों की नकल की जो इसे makeStyles() जोड़ रही थीं। निम्नलिखित मेरे लिए अब तक की कोशिश कर रहा है:

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

यह केवल अधिकतम है: 100% , जिसने यह काम किया। हालाँकि, अब चौड़ाई अधिकतम हो गई है। यह काम नहीं करेगा यदि मैं एक विशिष्ट अधिकतम मान सेट करता हूँ।

ग्रिड कंटेनर मार्जिन शून्य पर सेट करने के लिए मैंने इसे स्टाइल घटकों का उपयोग करके तय किया है।

स्टाइलिश ग्रिड कंटेनर:

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

अब GridContainer का उपयोग Grid घटक के बजाय किया जाता है जो अतिरिक्त चौड़ाई उत्पन्न कर रहा था।

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

मैंने इस्तेमाल कियाघटक एक 100% चौड़ाई और ऊंचाई आवरण के अंदर, लेकिन मैं इस मुद्दे पर भाग गया जहां कंटेनर पृष्ठ को 100vw से बाहर खींचता है और एक क्षैतिज अतिप्रवाह का कारण बनता है। मुझे समझ नहीं आता कि इसके लिए एक नकारात्मक मार्जिन का उपयोग क्यों किया जाता है? पृष्ठ को वापस सीमा में लाने के लिए मुझे डिफ़ॉल्ट शैलियों को ओवरराइड करना पड़ा:

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

IMO यह थोड़ा और स्पष्ट किया जाना चाहिए कि ग्रिड कंटेनरों का उपयोग किसी अनुप्रयोग के आवरण के रूप में नहीं किया जाना है।

डेस्कटॉप आकार में, मेरे पास सभी तरफ की ओर खींची हुई तस्वीरें हैं और xs = {12} के साथ फिक्सिंग करते हुए अजीब तरह से एक गद्दी दिखाई देती है। मेरे मामले में फिक्स @martjoao समाधान की तरह दिखता है, लेकिन केवल मोबाइल चौड़ाई:
gridSpacingFix: { '<strong i="7">@media</strong> (max-width:600px)': { width: '100% !important', margin: '0 !important', }, },

मैं इसी तरह के मुद्दे से मिला, और इसके द्वारा तय किया गया:

body { margin: 0; padding: 0; }

नीचे करने का प्रयास किया गया:

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

यह समस्या हल करता है।

बस उस मुद्दे का सामना कर रहा था और राशि से संबंधित मुद्दों को देखकर मैं सोच रहा था कि क्या यह सामग्री-यूआई में इसे ठीक करने के लिए समझ में आता है।

क्या हम अनिवार्य रूप से वैसा नहीं कर सकते जैसा कि वे यहां करते हैं: https://github.com/evgenyrodionov/flexboxgrid2/commit/37e02fec767449578202098fb8e9a2c6n20a2786e1#diff4b62e0ae269a54df45ab5.59&787878

एक ही मुद्दे में भाग गया, एक अर्द्ध फिक्स करके पाया

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

अभी भी एक ही मुद्दा है, लेकिन x = {12} जोड़कर तय किया गया है।
<Grid container spacing={3} xs={12}>

यह मुझे तय ... धन्यवाद!

अभी भी एक ही मुद्दा है, लेकिन x = {12} जोड़कर तय किया गया है।
<Grid container spacing={3} xs={12}>

यह मुझे तय ... धन्यवाद!

बहुत बढ़िया समाधान! यह हमारे लिए भी तय है। कंटेनर + xs चेतावनी को रोकने के लिए हमें container item जोड़ना पड़ा।

overflow-x: hidden जोड़ने के बाद हल किया गया मुद्दा; माता-पिता पर, जैसे कंटेनर के अंदर मुई-डिटैटेबल है, इसलिए कंटेनर में overflowX: 'hidden' जोड़ा गया

नीचे करने का प्रयास किया गया:

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

यह समस्या हल करता है।

धन्यवाद, मेरे लिए यह एकमात्र कार्यशील समाधान था।

मेरे लिए काम करने के लिए _Seems_ margin 0 !important को छोड़ना है

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

यह मुझे चकित करता है इस ui ढांचे में बहुत सारे कीड़े हैं। तुम्हारी

@SomnathKadam

overflow-x: hidden जोड़ने के बाद हल किया गया मुद्दा; माता-पिता पर, जैसे कंटेनर के अंदर मुई-डिटैटेबल है, इसलिए कंटेनर में overflowX: 'hidden' जोड़ा गया

इसके साथ समस्या यह है कि आप अभी भी स्क्रॉल कर सकते हैं। अतिप्रवाह-एक्स: छिपाना एक अच्छा समाधान नहीं है

मुइग्रिड: {
कंटेनर: {
चौड़ाई: "100%-महत्वपूर्ण";
मार्जिन: "0-महत्वपूर्ण"
}
},
@ rag4214
यह जबरन पूरे ढांचे की संरचना को संशोधित कर रहा है और अनुशंसित नहीं है। आप इसे एक जगह पर ठीक कर सकते हैं, दूसरे पर तोड़ सकते हैं।

@ मैनुअल 7 https://material-ui.com/compenders/grid/#negative -margin

मैं हैरान हूं, मैं शायद 2 साल से एमयूआई का उपयोग कर रहा हूं और इससे पहले कभी नहीं देखा। फिर भी इस पर काम नहीं किया कि ऐसा क्यों हुआ।

नीचे करने का प्रयास किया गया:

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

यह समस्या हल करता है।

यह समाधान मेरे लिए काम करता है।

यह इतने लंबे समय से चल रहा है कि यह प्रलेखन का हिस्सा होना चाहिए यदि कोई फिक्स तुरंत संभव नहीं है।

क्या अभी तक कोई तय है?
मैं इस मुद्दे पर चल रहा हूं और overflow-x: hidden का उपयोग करने की सोच रहा हूं, आपको क्या लगता है?

समस्या अब भी वहीं है। समाधान अतिप्रवाह-एक्स: माता-पिता पर छिपी हुई संपत्ति

इसके लिए बस एक और हैक, जो मेरे लिए काम करता है;)

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

उन 2px को मेरी ग्रिड परिभाषा के नीचे कहीं जोड़ा जा रहा है, इसलिए वास्तविक मूल्य अन्य लोगों के लिए अलग हो सकता है ...