मैं एक विवरण पृष्ठ के UI पर काम कर रहा हूं। पृष्ठ अपनी सामग्री को डेटा बेस से प्राप्त कर रहा है जो सामग्री को गतिशील रूप से अपडेट करता है। अब तक यूआई उस छवि की तरह दिखता है जिसे मैंने लिंक किया है
हालाँकि जब div की सामग्री बदलती है, तो इसका परिणाम छवियों को बहुत अधिक कवर किया जाता है।
एचटीएमएल इस प्रकार है।
<ion-content >
<ion-title *ngIf="item">{{item.title}}</ion-title>
<div class="container">
<div class="content">
<div *ngFor ="let image of image" >
<ion-row>
<ion-col size="12" offset="0">
<img id ="image" [src]="image" alt="this is the image"/>
</ion-col>
</ion-row>
</div>
</div>
<div class="overlay">
<ion-buttons slot="start">
<ion-back-button defaultHref="/tabs/tab4"></ion-back-button>
</ion-buttons>
<h2>{{item.title}}</h2>
<p>{{item.description}}</p></div>
</div>
</ion-content>
सीएसएस इस प्रकार है
.container {
display: grid;
}
.content, .overlay {
grid-area: 1 / 1;
}
.content {
margin-top: 20px;
}
.overlay {
width: 100%;
border-radius: 0px 0px 30px 30px;
background-color: #ffffff;
opacity: 1;
position: absolute;
}
मैं नीचे दी गई छवि को कवर किए बिना div की सामग्री को गतिशील रूप से कैसे अपडेट कर सकता हूं? क्या कोई तरीका है कि मैं छवि को पृष्ठ के नीचे और आगे बढ़ा सकता हूं क्योंकि अधिक पाठ के कारण ओवरले बड़ा हो जाता है?
1 उत्तर
चूंकि आप CSS ग्रिड का उपयोग कर रहे हैं, आप अपनी .overlay कक्षा में पूर्ण स्थिति को समाप्त कर सकते हैं।
अपनी .container कक्षा में यह अतिरिक्त संपत्ति बनाएं grid-template-rows: max-content minmax(0, 1fr);
फिर आप अपने .overlay को ग्रिड की पहली पंक्ति में रख सकते हैं जैसे आपके पास है, और फिर अपनी .content को दूसरी पंक्ति में रखें ताकि वे ढेर हो जाएं। .overlay पर margin-bottom: "however much you want it to overlap लगाएं। जैसे-जैसे .overlay में आपकी सामग्री बढ़ती है, वैसे-वैसे छवियों को नीचे धकेलते हुए उन्हें थोड़ा ओवरलैप करना होगा। यदि आप स्रोत क्रम में .content से पहले .overlay डालते हैं, तो आपको इसे छवियों के ऊपर प्रदर्शित करने के लिए position: relative; को .overlay में जोड़ना होगा। तो मूल रूप से आपके 3 वर्गों को कुछ इस तरह दिखना चाहिए -
.container {
display: grid;
grid-template-rows: max-content minmax(0, 1fr);
}
.content {
grid-row: 2 / 3;
}
.overlay {
width: 100%;
grid-row: 1 / 2;
border-radius: 0px 0px 30px 30px;
background-color: #ffffff;
opacity: 1;
margin-bottom: -10px;
}आप अनिवार्य रूप से दो कंटेनरों को उनकी संबंधित पंक्तियों में बिना किसी ओवरलैप के सेट कर रहे हैं और फिर छवियों को संदेश के नीचे थोड़ा ऊपर खींचने के लिए नकारात्मक मार्जिन का उपयोग कर रहे हैं। यह न भूलें कि यदि आप HTML क्रम को बदलते हैं और .overlay को .content से ऊपर रखते हैं, तो आपको इसे position: relative; देना होगा ताकि यह .content के ऊपर प्रदर्शित हो। . यह ओवरले के लिए प्रभावी रूप से हमेशा चित्रों के ऊपर रखने के लिए एक नया स्टैकिंग संदर्भ बनाता है। यदि आप स्रोत क्रम में .overlay को .content से ऊपर रखते हैं, तो आपको सीएसएस ग्रिड का उपयोग करने की कोई आवश्यकता नहीं होगी - जैसा कि आप जानते हैं।