Milligram: मेरी साइडबार का उपयोग करके अन्य तत्वों को दाईं ओर कैसे धकेलें?

को निर्मित 27 अक्तू॰ 2017 · 5टिप्पणियाँ · स्रोत: milligram/milligram

मैं एक साधारण साइड-नेविगेशन बनाना चाहता हूं जो पूरी स्क्रीन की ऊंचाई लेता है। मै इस्तेमाल कर रहा हूँ
मेरे आधार के लिए मिलीग्राम , और मैं चाहता हूं कि मेरी साइड-नेव इसके साथ काम करे। मेरे पास निम्नलिखित सेट अप है:

कोडपेन डेमो

जैसा कि आप देख सकते हैं, मेरा साइडबार निम्नलिखित तत्व है

<div class="sidebar"></div>

निम्नलिखित शैलियों के साथ:

div.sidebar { 
      position: absolute; width: 250px; 
      height: 100%;
      z-index: 99; 
      background-color: black;
 }

इस तरह के काम, साइडबार सबसे ऊपर दिखाई देता है, लेकिन बाकी सब कुछ साइड में नहीं जाता है। और अगर स्क्रीन छोटी है, तो सामग्री साइडबार से टकराती है।

मैं इसे कैसे बना सकता हूं ताकि साइडबार 250px (इसकी चौड़ाई) द्वारा दाईं ओर सब कुछ (नेवबार सहित) को धक्का दे? मुझे पता है कि यह छोटी स्क्रीन पर चीजों को अनुपयोगी बना देगा, लेकिन मैं उपयोगकर्ता को इसे टॉगल करने का एक तरीका दूंगा।

Hacktoberfest help wanted

स्रोत

fooksupachai

👍1

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

मुझे यह समस्या भी मिली। उम्मीद है कि कोई इस समस्या से मदद करेगा।

abc985 14 दिस॰ 2017

ढांचे के साथ बिल्कुल कोई समस्या नहीं है। आप अनिवार्य रूप से एक ऑफ-कैनवास साइडबार के पीछे हैं। मैंने इसे काम करने के लिए आपके कोडपेन को संशोधित किया है: https://codepen.io/chillyorange/pen/EQYJvQ

साइडबार पर फिक्स्ड पोजिशनिंग लागू की और साइडबार की चौड़ाई से मेल खाने वाले बाएं मार्जिन के साथ सामग्री को एक अतिरिक्त तत्व के अंदर लपेट दिया।

chillyorange 29 जन॰ 2018

👍1

@chillyorange की प्रतिक्रिया से आपकी समस्या का समाधान हो जाएगा।

फिक्स्ड आइटम नीचे स्क्रॉल नहीं करते हैं। तो आपके साइडबार की ऊंचाई 100% होगी जैसा आप चाहते हैं।

umitkucuk 29 जन॰ 2018

@fooksupachai मैं आपकी मदद कर सकता हूं!

यदि आप position: absolute परिभाषित करते हैं तो यह तत्व दूसरों को ओवरलैप करेगा। आप अपेक्षित व्यवहार करने के लिए मिलीग्राम ग्रिड का उपयोग करने का प्रयास कर सकते हैं।

मिलीग्राम ग्रिड:

स्थिति सीएसएस संपत्ति:

मुझे बताएं कि क्या आपके पास मिलीग्राम ग्रिड का उपयोग करने के बारे में कोई प्रश्न हैं।

cjpatoilo 7 फ़र॰ 2018

👍1

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

cjpatoilo 19 मई 2020

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

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

Milligram: मेरी साइडबार का उपयोग करके अन्य तत्वों को दाईं ओर कैसे धकेलें?

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

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