Search code examples
htmlcssangularangular-materialpanel

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.

Smaller image because whole thing was too large

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

Notice 4 has moved downwards

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.

Solution

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