Gatsby: [v2] अतिरिक्त div आवरण

@ पहुंच / राउटर इसे जोड़ता है, इसलिए यह स्वचालित रूप से फ़ोकस को प्रबंधित कर सकता है क्योंकि स्क्रीन पाठकों द्वारा सुनिश्चित साइटें प्रयोग करने योग्य हैं।

https://reach.tech/router/accessibility

मुझे लगता है कि यह काफी मूर्खतापूर्ण है लेकिन मुझे लगता है कि यह बेहतर होगा यदि केवल एक रैपिंग डिव होता।

यह पहुंच div के बारे में कुछ खास नहीं लगता है, क्या यह संभव है कि इसके बजाय html विशेषताओं को जोड़कर id="___gatsby" div रैपिंग के साथ पहुंच div को मर्ज करना संभव हो?

दुर्भाग्य से दोनों का विलय संभव नहीं है। शायद आप उन पर पुनः पहुंचते हुए @ रीट / राउटर के साथ काम कर सकते हैं जहां रीव्यू माउंट किया गया है।

मुझे इसमें height: 100% जोड़ने की आवश्यकता है, लेकिन इसके लिए कोई class या id नहीं है। मैंने इसे ऐप में ढूंढने की कोशिश की, लेकिन इसे ढूंढ नहीं पाया। क्या आप मुझे बता सकते हैं कि मैं इसमें id कैसे जोड़ सकता हूँ?

@colmtuite यह आदर्श नहीं है, लेकिन समूहन div <div id="___gatsby"> का एकमात्र बच्चा है, तो आप इसके माध्यम से लक्षित कर सकते हैं

#___gatsby > * {
  height: 100%;
}

अपडेट: यहां @ironblock द्वारा सुझाए गए इस अधिक विशिष्ट चयनकर्ता का उपयोग करने के लिए थोड़ा बेहतर समाधान हो सकता है ।

div[role="group"][tabindex] {
  height: 100%;
}

अद्यतन 2 : 2018 में वापस, यह मामला नहीं था लेकिन आजकल, div प्रश्न में gatsby-focus-wrapper की एक आईडी है। तो चयनकर्ता बहुत कम अस्पष्ट हो सकता है:

#gatsby-focus-wrapper {
  height: 100%;
}

प्रासंगिक मुद्दा: https://github.com/reach/router/issues/63

मुझे व्यक्तिगत रूप से लगता है कि यह गुमराह है और स्टाइल घटकों का उपयोग नहीं करने वालों के लिए मुद्दों का एक स्रोत है।

@kaishin क्या आप इसका मतलब विस्तार कर सकते हैं? वास्तव में क्या गुमराह किया जाता है?

@janosh का मतलब पहुंच / राउटर अनुरक्षकों का निर्णय है कि वे इस रैपर div को अक्षम करने या कम से कम अनुकूलित करने का तरीका प्रदान न करें। मैं सिमेंटिक HTML का एक बड़ा प्रस्तावक हूं और मुझे इस बात का मलाल है कि मुझे अभी तक एक और रैपर div से निपटना है जो केवल एक पुस्तकालय के लिए एक हुक के रूप में कार्य करता है जिसे मैं इस मुद्दे का सामना करने से पहले मुश्किल से जानता था।

मैं अब आपकी बात समझता हूं और काफी सहमत हूं। मुझे गैर-शब्दार्थ मार्कअप के बारे में बहुत कुछ लगता है।
मुझे आपकी टिप्पणी के अंत तक सिर्फ भ्रम था

... स्टाइल घटकों का उपयोग नहीं करने वालों के लिए मुद्दों का एक स्रोत है

जैसा कि मैंने नहीं देखा कि styled-components _

मैं विश्वास नहीं कर सकता कि यह मुद्दा इतने अनुचित समाधान के साथ बंद कर दिया गया है।

@ danielo515 खैर, मुद्दा एक निर्भरता के साथ है, इसलिए यह कुछ हद तक समझ में आता है।

यह टिप्पणी एक सीएसएस वर्कअराउंड प्रदान करता है: https://github.com/reach/router/issues/63#issuecomment -423250999

जैसा कि मैंने नहीं देखा कि स्टाइल-घटकों का उपयोग करने वाले लोग अप्रभावित क्यों रहेंगे।

@ भजन तब से मैंने इस मुद्दे को खोला, मुझे स्टाइल के साथ कोई समस्या नहीं थी। तो वास्तव में यहाँ समस्या क्या है?

@LekoArts Unsemantic markup जो पर्याप्त सामग्री के अभाव में भी खिड़की के नीचे पाद लेख रखने के लिए CSS समाधानों को तोड़ता है। styled-components का उपयोग करना और वर्कअराउंड CSS चयनकर्ता को जानने से रैपर div किसी भी अधिक अर्थ का नहीं बनता है।

मूल रूप से, जब आप शरीर पर कहीं क्लिक करते हैं और तब टैब दबाते हैं तो यह निकटतम ध्यान देने योग्य तत्व को केंद्रित करेगा। हालाँकि इस आवरण का अर्थ है कि शरीर पर क्लिक करने से आवरण पर ध्यान केंद्रित होगा, तत्व के पास के बजाय टैब क्रम को शुरुआत में रीसेट करना होगा। मुझे यकीन नहीं है कि अगर यह एक एक्सेसिबिलिटी की समस्या है, लेकिन यह ऐसा कुछ है जिसे मैंने किसी तत्व के पास क्लिक करने की कोशिश करने पर ध्यान दिया और तब टैब को दबाएं।

@colmtuite ऊंचाई की तरह कुछ का उपयोग करने पर विचार करें: 100vh;

@skinenbayev @colmtuite
या फ्लेक्स के साथ,

div[role="group"][tabindex] {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

@Schmerb मुझे लगता है कि आपके सीएसएस समर्पित वर्ग के लिए 100vh की स्थापना कुछ उत्पन्न कोड के साथ हेरफेर करने की तुलना में अधिक सुविधाजनक तरीका है।

@skinenbayev
मुझे लगता है कि मुझे स्पष्ट करना चाहिए था ... 100vh महान है यदि आप चाहते हैं कि आपके ऐप की निश्चित ऊंचाई आपके व्यूपोर्ट के समान हो ...

लेकिन अगर आपको सभी उपलब्ध स्थान लेने के लिए ऐप की आवश्यकता है

(अनिवार्य रूप से height: 100% साथ हर कोई प्रयास कर रहा है, लेकिन माता-पिता के एक सेट ऊंचाई नहीं होने के कारण सबसे अधिक संभावना असफल है)

Flexbox बचाव के लिए।

मेरे विशिष्ट मामले को और स्पष्ट करने के लिए, दोनों प्रयासों के स्क्रीनशॉट:
नीली / नारंगी सीमा एक /page घटक है। रैंडम 'हुक' डिव जो कि गैट्सबी स्थानों को सफेद स्थान है। height: 100vh के साथ सफेद स्थान को व्यूपोर्ट के तल से नीचे अच्छी तरह से विस्तारित होते देखा जा सकता है ... पृष्ठ से पाद को धक्का देना भले ही पृष्ठ में अनिवार्य रूप से कोई सामग्री न हो।

अपनी मुख्य धुरी के साथ flex का उपयोग करके स्विच किया गया ( flex-direction: column डिफ़ॉल्ट के बजाय flex-direction: row ) और फ्लेक्स-बढ़ने वाली संपत्ति, आप इसे बहुत अच्छी तरह से सभी उपलब्ध स्थान ले सकते हैं।

height: 100vh;

display: flex; flex-direction: column; flex-grow: 1;

मैं जो कुछ भी देख रहा हूं वह समस्या के लिए वर्कअराउंड है जो कि अस्तित्व में भी नहीं होना चाहिए।
यदि आपका लक्ष्य ब्राउज़र फ्लेक्सबॉक्स का समर्थन नहीं करता है तो क्या होगा?

मैं `बग: 100vh 'की स्थापना करते समय एक बग के साथ समस्याओं को हल कर चुका हूं, जहां स्क्रॉलिंग की आवश्यकता होती है, मुझे क्रोम में एक डबल स्क्रॉलबार मिलता है।

जिस तरह से मैंने एक समान समस्या को हल किया है वह height: 100vh; उपयोग करने के बजाय है, मेरे रैपिंग Layout घटक में min-height: 100vh; जोड़ना है। जब आप सेटिंग जैसी किसी चीज़ के साथ संयोजन करते हैं:
grid-template-areas: 'Header' 'Content' 'Footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;

अब, रैपिंग कंपोनेंट हमेशा _at कम से कम व्यू पोर्ट की ऊंचाई का होगा, लेकिन यदि कंटेंट को स्क्रॉल करने के लिए पर्याप्त बड़ा होना चाहिए, तो स्क्रीन के निचले भाग में बने रहने के लिए पाद तत्व को पुश किया जाएगा।

लेकिन (बड़ा लेकिन!) दुर्भाग्य से, ग्रिड में फ्लेक्सबॉक्स की तुलना में कम ब्राउज़र समर्थन है, लेकिन यह व्यक्तिगत रूप से कम 'हैकी' महसूस करता है।

हो सकता है कि फ्लेक्स समर्थन न करने के साथ मदद करने के लिए एक उत्तर नहीं है, लेकिन शायद पृष्ठ के निचले हिस्से से चिपके रहने के लिए एक पाद प्राप्त करने का तरीका है?

दुर्भाग्य से, जबकि प्रश्न में कोड की लाइन पहुंच को संबोधित करती है, यह एक्सेसिबिलिटी एरर का कारण भी बनती है। मैंने https://github.com/reach/router/issues/257 पर एक समस्या दर्ज की है

ज्ञात हो कि 100vh अर्थ एंड्रॉइड ब्राउज़र के लिए कुछ अलग हो सकता है।
त्वरित googling उदाहरण का खुलासा: https://stackoverflow.com/q/30148956

किसी कारण से div[role="group"][tabindex] उस div पर कोई शैली लागू नहीं कर रहा है। मुझे आईडी #gatsby-focus-wrapper निर्दिष्ट करना था

अभी भी ऊंचाई की समस्या का कोई उचित समाधान नहीं है?