Удалить заполнение из последнего элемента строки fxLayoutGap - PullRequest
Новая
       12

Удалить заполнение из последнего элемента строки fxLayoutGap

0 голосов
/ 04 сентября 2018

У меня проблема с использованием fxLayoutGap. В последнем столбце моего списка есть отступы, и я не хочу его.

Как сохранить fxLayoutGap (пробел между карточками) и убрать отступ из последнего столбца? Спасибо! 

 <div fxFlexFill fxLayout="row wrap" fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px grid" style="margin-right:-20px;">
                        <div fxHide.lt-sm="true" fxFlex="calc(25%-20px)" fxFlex.md="33">
                            <div fxFlexFill fxLayoutAlign="center center">
                                <mat-card (click)="addAdvert()" class="mat-card-add-button">
                                    <div fxLayout="row" fxLayoutAlign="center center" fxFlex="100%">
                                        <span style="font-size:32px;text-align:center">+<br />test</span>
                                    </div>
                                </mat-card>
                            </div>
                        </div>
                        <div fxFlex="calc(25%-20px)" fxFlex.md="33" *ngFor="let product of products | slice:0:3">
                            <div style="border:1px solid #ccc" fxFlexFill fxLayoutAlign="center stretch">
                                <mat-card class="ad">
                                    <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
                                    <mat-card-title>test</mat-card-title>
                                    <mat-card-content>
                                        <p>
                                            test
                                        </p>
                                    </mat-card-content>
                                    <mat-divider [inset]="true"></mat-divider>
                                    <mat-card-actions align="end">
                                        <button mat-icon-button matTooltip="edit" matTooltipShowDelay="800">
                                            <mat-icon>mode_edit</mat-icon>
                                        </button>

                                        <button mat-icon-button matTooltip="delete" matTooltipShowDelay="800">
                                            <mat-icon>delete</mat-icon>
                                        </button>
                                    </mat-card-actions>
                                </mat-card>
                            </div>
                        </div>
                    </div>

Проблема (в красном):

enter image description here

РЕДАКТИРОВАТЬ:

Я использовал решение Абдула Рафая, но здесь появилась новая проблема:

enter image description here

1 Ответ

0 голосов
/ 04 сентября 2018

Редактировать: попробуйте назначить классы своим элементам через ngFor здесь: 

<div fxFlexFill fxLayout="row wrap" fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px grid" style="margin-right:-20px;">
  <div fxFlex="calc(25%-20px)" fxFlex.md="33"
    *ngFor="let product of products;let i = index"
    [ngClass]="'product-'+getClassName(i)">
    ...

.ts 

  counter: number = 0;

  getClassName(index) {
    if(index%4 === 0)
      this.counter = 0;
    this.counter++;
    switch(this.counter) {
      case 1:
        return "first"
      case 2:
        return "second"
      case 3:
        return "third"
      default:
        return "fourth"
    }
  }

затем добавьте эти css стили: 

.product-first[fxFlex] {
  padding-right: 20px !important;
}
.product-second[fxFlex] {
  padding-left: 6.66px !important;
  padding-right: 13.34px !important; 
}
.product-third[fxFlex] {
  padding-left: 13.34px !important;
  padding-right: 6.66px !important;
}
.product-fourth[fxFlex] {
  padding-left: 20px !important;
  padding-right: 0 !important;
}

Я не уверен, что это лучший способ, но он работает.

Старый ответ: Просто добавьте css стилей: 

[fxFlex]:last-of-type { padding-right:0px !important; }

Если есть более одной строки: 

[fxFlex]:nth-child(4n) { padding-right:0px !important; }

Если есть больше элементов fxFlex, вы можете назначить класс: 

<div fxFlexFill fxLayout="row wrap" fxLayout.xs="column" fxLayout.sm="column" fxLayoutGap="20px grid" style="margin-right:-20px;">
    <div class="padding-fix" fxHide.lt-sm="true" fxFlex="calc(25%-20px)" fxFlex.md="33">
    ...

.padding-fix[fxFlex]:nth-child(4n) { padding-right:0px !important; }
...