CODEWITHSUNDEEP
angulartypescriptlistgridstyles
Yamdi
Yamdi

Reputation: 15

How to align my label with my button in angular material?

I have simple problem - cant align my button with text. Now it looks like this:

enter image description here

Html:

[...]
<mat-grid-list cols="16" rowHeight="30px" class="explorer-list-row-title">
 <div>
  <mat-grid-tile 
   *ngFor="let tile of tiles" 
   [colspan]="tile.cols" 
   [rowspan]="tile.rows" 
   [class]="tile.class" 
   (click)="sortOnClick(tile)"
  >
   <span class="explorer-list-row-title-text">
    {{tile.text}}
    <mat-icon>
     {{!tile.direction ? 'arrow_drop_down':'arrow_drop_up'}}
    </mat-icon>
   </span>
  </mat-grid-tile>
 </div>
</mat-grid-list>
[...]

Scss:

.explorer {
 padding-top: 7px;
 padding-left: 16px;

 &-list {

  &-position {
   margin-left: -16px; //TODO fix
   margin-top: -7px; //TODO fix
   margin-right: -16px; //TODO fix
  }

  &-row {

   &-title {
    border-bottom: 1px solid grey;

    &-text {
     padding-bottom: 8px;
    }
   }
  }
 }
}

If i try add a class to mat-icon with padding or margin, it always moving with text and making a mess. Any ideas?

Upvotes: 0

Views: 564

Answers (1)

ionut-t
ionut-t

Reputation: 1177

If you want them aligned just move the icon outside the span element.

 <span class="explorer-list-row-title-text">
    {{tile.text}}
 </span>
 <mat-icon>
    {{!tile.direction ? 'arrow_drop_down':'arrow_drop_up'}}
 </mat-icon>

Upvotes: 1

Related Questions