Material Dialog not acting responsive

Question

I'm trying to set up a dialog with a series of checkboxes and when in full screen mode I have everything acting and looking the way I want as shown below.

I have a breakpoint set at 690px that switches into single column mode and that is working as well. However, the container div does not shrink to fit the window, and the checkboxes are all centered in that div. See below:

If I shrink the window to a phone size screen, the main container div (which according to the inspector is mat-dialog-container) is still too large for the window and I lose the checkboxes as shown below (plus I dont get scrolling even though I've set a max-height on the div):

I've tried everything I can think of to change the size of the div to match the window size, move the checkboxes to the left with fxLayout align but nothing works. What scss properties should I try to a)make the main container fit the screen size and b)move the checkboxes to the left of the div?

Here is my 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;
}

and the 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>

Any pointers would be appreciated!

You need to use flexbox, there is a lot of tutorials in the network. I don't like to use links, but try this one css-tricks.com/snippets/css/a-guide-to-flexbox — Gaspar
That solved my problem with the outer div and scrolling. But if I try to use flex in the gird list, then nothing renders at all. — cpeddie

cpeddie cpeddie · Accepted Answer · 2019-03-23T21:09:02

Turns out I needed to style mat-figure. css of .mat-grid-tile .mat-figure { font-size: .8em; justify-content: left !important;} fixed the centering problem.

Material Dialog not acting responsive

1 Answers