CODEWITHSUNDEEP
cssangular-material
usersam
usersam

Reputation: 1235

Alignment of buttons in toggle button group in Angular Material

I am trying to make a material tool bar with few material button inside. I want to align first button on left side and rest three buttons on right side of tool bar. I am trying to achieve this from CSS but no able to. 

<mat-toolbar color="primary">
    <mat-toolbar-row>
      <mat-button-toggle-group #group="matButtonToggleGroup">
        <mat-button-toggle value="left" aria-label="Text align left">
          <mat-icon>format_align_left</mat-icon>
        </mat-button-toggle>
        <mat-button-toggle value="center" aria-label="Text align center">
          <mat-icon>format_align_center</mat-icon>
        </mat-button-toggle>
        <mat-button-toggle value="right" aria-label="Text align right">
          <mat-icon>format_align_right</mat-icon>
        </mat-button-toggle>
        <mat-button-toggle value="justify" aria-label="Text align justify">
          <mat-icon>format_align_justify</mat-icon>
        </mat-button-toggle>
      </mat-button-toggle-group>
</mat-toolbar-row>
</mat-toolbar>

<div class="example-selected-value">Selected value: {{group.value}}</div>

Upvotes: 0

Views: 6204

Answers (1)

Roy
Roy

Reputation: 8069

You need to adjust some flexbox styling to make it work. The current implementation uses display: inline-flex;, while it needs display: flex;. Next to that, the second toggle (.mat-button-toggle:nth-child(2)) needs to be pushed to the right side. That can be achieved with margin-left: auto.

SCSS code

.mat-button-toggle-group.mat-button-toggle-group {
  display: flex;

  .mat-button-toggle:nth-child(2) {
    margin-left: auto;
  }
}

Compiled CSS code

.mat-button-toggle-group.mat-button-toggle-group {
  display: flex;
}
.mat-button-toggle-group.mat-button-toggle-group .mat-button-toggle:nth-child(2) {
  margin-left: auto;
}

Outcome Display mat-toggle different

See this StackBlitz for an example. Note that the default toggle group needs to be overridden by adding the same class again in CSS and making it thus more specific.

Upvotes: 1

Related Questions