Material-design-lite: टूलटिप्स की खराब स्थिति

को निर्मित 8 जुल॰ 2015 · 3टिप्पणियाँ · स्रोत: google/material-design-lite

एक किनारे का मामला अधिक है लेकिन फिर भी एक ऐप में हो रहा है जिसे मैं वर्तमान में विकसित कर रहा हूं। यह परिदृश्य केवल तभी होता है जब एक स्क्रॉल बार मौजूद होता है और विचाराधीन तत्व का अनुवाद सीएसएस के माध्यम से लागू होता है।

यहां उदाहरण देखें (लाल बॉक्स पर होवर करें)

ऐसा कुछ सैद्धांतिक रूप से इस मुद्दे को ठीक करेगा (मुझे लगता है)

let rect = el.getBoundingClientRect();
let left = rect.left + window.pageXOffset;
let top = rect.top + window.pageYOffset;

// now we have a more accurate representation of the current top / left coords

P1 Tooltip

स्रोत

brandonjpierce

सबसे उपयोगी टिप्पणी

तिल!

सीएसएस युक्ति के अनुसार देखा गया व्यवहार सही है:

उन तत्वों के लिए जिनका लेआउट CSS बॉक्स मॉडल द्वारा शासित होता है, परिवर्तन के लिए कोई भी मूल्य के अलावा कोई भी मूल्य एक स्टैकिंग संदर्भ और एक युक्त ब्लॉक दोनों के निर्माण में परिणाम देता है। ऑब्जेक्ट निश्चित स्थिति वाले वंशजों के लिए एक युक्त ब्लॉक के रूप में कार्य करता है।

हमारे टूलटिप्स position: fixed का उपयोग करके स्थित हैं। इसका मतलब है, एक परिवर्तन लागू करके - भले ही वह एक एनओपी हो - आपने मूल स्थिति को निश्चित स्थिति के लिए स्थानांतरित कर दिया।

टूलटिप को दूसरे कंटेनर (या body ) में ले जाना आसान उपाय है।

surma 9 जुल॰ 2015

👍4

सभी 3 टिप्पणियाँ

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

Garbee 8 जुल॰ 2015

तिल!

सीएसएस युक्ति के अनुसार देखा गया व्यवहार सही है:

उन तत्वों के लिए जिनका लेआउट CSS बॉक्स मॉडल द्वारा शासित होता है, परिवर्तन के लिए कोई भी मूल्य के अलावा कोई भी मूल्य एक स्टैकिंग संदर्भ और एक युक्त ब्लॉक दोनों के निर्माण में परिणाम देता है। ऑब्जेक्ट निश्चित स्थिति वाले वंशजों के लिए एक युक्त ब्लॉक के रूप में कार्य करता है।

टूलटिप को दूसरे कंटेनर (या body ) में ले जाना आसान उपाय है।

surma 9 जुल॰ 2015

👍4

हम्म, बहुत दिलचस्प। कम से कम हम अभी जानते हैं और अगर यह फिर से सामने आता है तो लोगों को यहां इंगित कर सकते हैं। @surma शोध करने के लिए धन्यवाद!

Garbee 9 जुल॰ 2015

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Material-design-lite: टूलटिप्स की खराब स्थिति

सबसे उपयोगी टिप्पणी

सभी 3 टिप्पणियाँ

संबंधित मुद्दों