Блог

У меня есть два дива в моем основном контейнере fxLayout. Они выглядят так:

Где красное поле-контейнер fxLayout, синее поле-информация, а черное поле-Диаграмма. Как можно заметить, div диаграмм больше, чем div информационного поля. Я бы хотел, чтобы он всегда оставался таким при изменении размера. Чтобы достичь этого, я сделал следующее:

information.component.html:

Этот компонент представляет собой просто коробку с несколькими mat-card . Он fxLayout также находится в контейнере.

  lt;div id = "dataInformation" fxLayout="column" fxLayoutAlign="space-evenly center" fxLayoutGap="5%"gt;    lt;h1gt;CrowBox Informationlt;/h1gt;    lt;!-- ...CODE FOR DROPDOWN BUTTON... --gt;   lt;!-- ...EXAMPLE MAT-CARD... --gt;  lt;mat-cardgt;  lt;mat-card-titlegt;NICKNAMElt;/mat-card-titlegt;  lt;mat-card-contentgt;{{ crowboxNickname }}lt;/mat-card-contentgt;  lt;/mat-cardgt;    lt;!-- ...SAME MAT-CARDS JUST WITH DIFFERENT PROPERTIES... --gt;  lt;/divgt;  

Применяется только стиль width:75% для .mat-card и стиль, связанный со шрифтом.

Затем я вызываю этот компонент в другом компоненте.

data.component.html

Здесь я создаю диаграммы, вызываю компонент information.и помещаю все это в другой контейнер fxLayout. Я также указываю, что должно произойти, если размер окна будет изменен. Я бы хотел, чтобы пропорции размеров оставались прежними, когда контейнер переходит из строки в столбец. Однако по какой-то причине, fxFlex.xs похоже, это не работает для меня, и диаграмма в конечном итоге выглядит очень маленькой, как можно увидеть здесь:

  lt;div class="wrapper" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-evenly center" gt;    lt;div id = "charts" fxFlex="60" fxFlex.xs="60"gt;  lt;!-- THE CHART --gt;  lt;div *ngIf="showCoinsDeposited === false" gt;  lt;canvas baseChart  [datasets]="crowOnPerchChartData"  [labels]="crowOnPerchChartLabels"  [options]="crowOnPerchChartOptions"  [legend]="crowOnPerchChartLegend"  [chartType]="crowOnPerchChartType"  [colors]="crowOnPerchChartColor"  gt;  lt;/canvasgt;   lt;/divgt;  lt;!-- ...ANOTHER CHART HERE... --gt;  lt;/divgt;   lt;!-- THE INFORMATION BOX --gt;  lt;div fxFlex="27" fxFlex.xs="27" style="border: blue; border-style: double;"gt;  lt;app-information [crowsOnPerch]="crownsOnPerchValues" [coinsDeposited]="coinsDepositedValues"gt;lt;/app-informationgt;  lt;/divgt;   lt;/divgt;  

I have set fxFlex.xs for the chart to be 60 and fxFlex.xs for the information box to be 27. I do not think this is being accurately reflected and cannot seem to figure out why. I would like the chart to fill the width of the screen and be much larger. How might I achieve this?

Note: The charts and wrapper do not have any positional styling (only fonts and borders).