Angular Flip Card with ECharts Breaks Rendering When Chart is on both front and back?

Issue

In this flip card demo the flip card works as long as the back card does not have the echart ( <chart></chart>) Chart on it.

CSS grid is being used for the responsive layout and the demo lays out two flip cards either side by side or in a column, depending on the width of the viewport.

When the two cards are laid out in a row, they are supposed to appear side by side separated by a gap, however when the chart being rendered on both the front and back of each flip card, it breaks the rendering when the viewport is resized (The cards overflow each other and if flipped they appear out of place).

This is the markup for the demo that works the way it is supposed to. In this demo there is no <chart></chart> on the back cards, and so the two flip cards inside a grid that will lay them out in a row as long as there is enough space.

<h1>Flip on Y Axis Fixed</h1>

<section class="GridContainer">
  <div>
    <button (click)="click()" mat-button color="accent">Flip</button>

    <flip-card [flipped]="flipped">
      <flip-card-front>
        <chart></chart>
      </flip-card-front>
      <flip-card-back> <h1>HELLO</h1> </flip-card-back>
    </flip-card>
  </div>
  <div>
    <button (click)="click()" mat-button color="accent">Flip</button>

    <flip-card [flipped]="flipped">
      <flip-card-front>
        <chart></chart>
      </flip-card-front>
      <flip-card-back> <h1>HELLO</h1> </flip-card-back>
    </flip-card>
  </div>
</section>

If the flip button is pushed we can see that the cards flip inside their respective areas of the grid.

However if we put the EChart bar chart on both the front and back within the flip card, the demo breaks when the viewport is resized, causing the grid to change its layout.

If the viewport is not changed then it may work fine.

I think it's because when the flip card hides a card it sets backface-visibility: hidden; and this causes the EChart to overflow the container and that "Breaks" the html....

This is the markup that "Breaks".

<h1>Flip on Y Axis Error</h1>

<section class="GridContainer">
  <div>
    <button (click)="click()" mat-button color="accent">Flip</button>

    <flip-card [flipped]="flipped">
      <flip-card-front>
        <chart></chart>
      </flip-card-front>
      <flip-card-back> <chart></chart> </flip-card-back>
    </flip-card>
  </div>
  <div>
    <button (click)="click()" mat-button color="accent">Flip</button>

    <flip-card [flipped]="flipped">
      <flip-card-front>
        <chart></chart>
      </flip-card-front>
      <flip-card-back> <chart></chart> </flip-card-back>
    </flip-card>
  </div>
</section>

Does anyone have any ideas for how to fix this?

Solution

The solution is to use the use absolute positioning on the echarts div.

div[echarts] {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

This allows the chart to be put within the grid container and ensures that it resizes as the grid resizes the cells.

Here is a demo.

Answered By - Ole