Я пытаюсь настроить диалог с рядом флажков, и когда в полноэкранном режиме все работает и выглядит так, как я хочу, как показано ниже.
У меня установлена точка останова на 690px, которая переключается в режим одного столбца, и это тоже работает. Тем не менее, контейнерный элемент div не сжимается, чтобы соответствовать окну, и флажки все центрированы в этом элементе. Увидеть ниже:
Если я уменьшу окно до размера экрана телефона, div основного контейнера (который, согласно инспектору - mat-dialog-container) все еще слишком велик для окна, и я потеряю флажки, как показано ниже (плюс я не получить прокрутку, хотя я установил максимальную высоту на div):
Я перепробовал все, что мог придумать, чтобы изменить размер div в соответствии с размером окна, переместить флажки влево с выравниванием fxLayout, но ничего не работает. Какие свойства scss я должен попытаться: а) сделать так, чтобы основной контейнер соответствовал размеру экрана и б) переместить флажки слева от div?
Вот мой css:
.a-list-title {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 1em;
}
.mat-grid-tile {
font-size: .8em;
}
.mat-checkbox {
width: 140px;
align-self: left;
align-items: left;
align-content: left;
border: 1px solid;
padding-left: 5px;
margin: '0 auto';
}
mat-dialog-container {
width: 60%;
height: 40vh;
max-height: 80vh;
}
и html:
<div class="aList-container"
fxLayout="column"
fxLayoutGap="10px"
fxLayoutAlign="start"
style="width:500px;max-height:50%">
<div fxFlex style="border: solid 1px;">
<div class="a-list-title" >
<h3>AIRCRAFT LIST</h3>
<hr>
</div>
</div>
<div fxFlexFill fxLayout="column" height="auto" style="border: solid 1px red">
<mat-grid-list [cols]="breakpoint" rowHeight="30px" gutterSize="0px" (window:resize)="onResize($event)">
<mat-grid-tile fxLayout="column" *ngFor="let aircraft of aircraftList" >
<mat-checkbox id="{{aircraft.DeviceName}}">{{aircraft.DeviceName}}</mat-checkbox>
</mat-grid-tile>
</mat-grid-list>
</div>
</div>
Любые указатели приветствуются!