打开垫子扩展面板正在移动对面的柱子，如何保持不动? [英] 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屋！