मेरी परियोजना में मेरे पास दो कॉलम हैं, जिनमें से प्रत्येक का अपना मैट-एकॉर्डियन है जिसमें कुछ मैट-विस्तार पैनल हैं।

Smaller image because whole thing was too large

जब मैं विस्तार पैनल में से किसी एक को खोलने के लिए क्लिक करता हूं, तो यह विपरीत कॉलम को नीचे की ओर ले जा रहा है।

Notice 4 has moved downwards

यहाँ सीएसएस है। मूल रूप से, "पंक्ति" में दो स्तंभ होते हैं, जो अकॉर्डियन को धारण करते हैं।

.row {
    padding-top: 120px;
    padding-left: 25px;
    padding-right: 25px;
    flex-flow: row wrap;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  
}

.column {
    flex-direction: column;
    box-sizing: border-box;
    display: flex;
    flex: 1 1 50%;
    flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 50%;
    max-width: 50%;
  
}

.mat-expansion-panel {
    background: rgba(0, 0, 0, 0.7);
    width: px;
    margin-bottom: 1.5rem;
}

.mat-expansion-panel-header {
    height: 150px;
    font-family: Gotham HTF;
    font-size: 26px;
    justify-content: space-between;
    text-align: center;
}

यदि क्लिक नहीं किया जा रहा है तो मैं विपरीत कॉलम को जगह पर रखना चाहता हूं।

क्या विपरीत कॉलम को जगह में रखने का कोई तरीका है ताकि क्लिक किया गया मैट-विस्तार पैनल वाला कॉलम ही चल रहा हो? यदि ऐसा कोई तरीका नहीं है, तो क्या हेडर और सामग्री के साथ मैट-कार्ड का उपयोग करके मैट-विस्तार पैनल को दोहराने का कोई तरीका है? मुझे स्थिर रहने के लिए सब कुछ चाहिए।

0
bensalerno 27 अक्टूबर 2020, 22:16

1 उत्तर

सबसे बढ़िया उत्तर

जैसा मैंने अनुमान लगाया था। आप पंक्ति सामग्री को केंद्र में संरेखित कर रहे हैं। पंक्ति सामग्री को पंक्ति के शीर्ष पर संरेखित करने के लिए align-items को उदाहरण के लिए flex-start में बदलें।

.row {
    ...
    align-items: flex-start;      
}
1
Andres Abadia 27 अक्टूबर 2020, 20:52