How to Change the Width of Angular Material Button

Angular Material - Why is my md-button full-width?

Just wrap it in another div if this is undesired. The flex-direction of <div layout="column"> seems to be responsible for the behavior.

Material button size responsive

You can use the property wrap of Flex:
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

So when there is no more space for the html elements inside the div, it will re-order the elements in order all the elements get into the div.

In your case, you should do:

          <div fxLayout="row wrap" fxLayoutAlign="space-between">

            <mat-form-field>
              <mat-select [formControl]="filterchips" multiple placeholder="Filter by tags">
                <mat-select-trigger>
                  ...
                </mat-select-trigger>
                <mat-option *ngFor="..." [value]="..." (click)="...">
                  {{ ... }}
                </mat-option>
              </mat-select>
            </mat-form-field>

            <div style="height: 70%; width: 70%;" style="display: block">
              <button [disabled]="isDisabled" mat-raised-button color="primary" (click)="..." >APPLY FILTER</button><br>
            </div>

          </div>

Check the Angular Flex Layout documentation about wrap:

https://github.com/angular/flex-layout/wiki/fxLayout-API#fxlayout--wrap

Related Topics