打开垫子扩展面板正在移动对面的柱子，如何使其保持静止? [英] Opening mat-expansion panel is moving the opposite column, how to keep it still?

问题描述

在我的项目中，我有两列，每列都有自己的打击垫手风琴，其中包含一些打击垫扩展面板.

In my project I have two columns, each with their own mat-accordion which holds some mat-expansion panels.

当我单击以打开任何一个扩展面板时，它正在将相反的列向下移动.

When I click to open any one of the expansion panels, it is moving the opposite column downwards.

这是CSS.基本上，行"是指包含两列，其中包含手风琴.

Here is the CSS. Basically, the "row" holds the two columns, which hold the accordions.

.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;
}

如果不单击相反的列，我希望将其保留在原处.

I would like the opposite column to be held in place if it is not being clicked.

是否有一种方法可以将对面的色谱柱固定在原来的位置，以便只有带有单击垫扩展面板的色谱柱才能移动?如果没有这种方法，是否可以使用带有页眉和内容的垫板来复制垫板扩展面板?我需要一切保持静止.

Is there a way to keep the opposite column held in place so that only the column with the mat-expansion panel that was clicked is moving? If there is no such way, is there a way to replicate a mat-expansion panel using mat-card with header and content? I need everything to stay still.

推荐答案

就像我猜到的那样.您正在将行内容与中心对齐.将align-items更改为例如flex-start，以使行内容与行顶部对齐.

Just like I guessed. You're row content is being align to the center. Change the align-items to for example flex-start to align the row content to the top of the row.

.row {
    ...
    align-items: flex-start;      
}

这篇关于打开垫子扩展面板正在移动对面的柱子，如何使其保持静止?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！