Установите индекс z в ячейке таблицы для каждой строки в угловом материале

Question

Я пытаюсь установить z index / overlayed div для ячейки каждой строки, которая оказывает растяжимое действие при щелчке значка.

Проблема в том, что он (значки) расширяет столбец, даже если вместо этого я дал z-index для наложения его на другие (левые) столбцы. Здесь ожидается, что он не должен увеличивать ширину столбца, вместо этого он должен перекрывать левую сторону для каждого значка.

Здесь - это StackBlitz для того же столбца, где он расширяется.

Answer 1

Запрошенная вами функциональность может быть достигнута с помощью свойства css position.

мы можем заключить символы в div, имеющий css position:absolute, и родительский div с классом button-rowможет иметь css position:relative.

Я обновил вашу демонстрацию stackblitz, как описано выше.https://stackblitz.com/edit/stackoverflow-56936645

ваш шаблон будет выглядеть так:

<ng-container matColumnDef="symbol">
  <th mat-header-cell *matHeaderCellDef> Symbol</th>
  <td mat-cell *matCellDef="let element; let i = index">
    <!--.button-row starts, it is a parent row with position relative-->
    <div class="button-row" style="">
      <!--.float-button-container starts,  it is a wrapper div with position:absolute-->
      <div class="float-button-container" [class.active]="showFloatingButtons[i] == true">
        <mat-icon mat-fab color="primary" class="floating-buttons">offline_pin
        </mat-icon>
        <mat-icon mat-fab color="primary" class="floating-buttons">query_builder
        </mat-icon>
        <mat-icon mat-fab color="primary" class="floating-buttons" disabled>restore
        </mat-icon>
        <mat-icon mat-fab color="primary" class="floating-buttons">
          play_circle_filled
        </mat-icon>
      </div>
      <!--.float-button-container ends-->
      <mat-icon (click)="toggleFloat(i)" class="sky_blue">more_horiz</mat-icon>
    </div>
    <!--.button-row ends-->
  </td>
</ng-container>

, а ваши стили будут выглядеть так:

.button-row {
  position: relative;
}

.float-button-container {
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  background-color: #ffffff;
  width: 0px;
  transition: width 150ms ease-in-out;
  overflow: hidden;
}

.float-button-container.active {
  width: 100px;
  transition: width 150ms ease-in-out;
}

Ваша проблема почти такая же, как выпадающий список, которыйоткрывается на левой стороне.Подробнее о создании выпадающих меню с помощью css читайте здесь: https://www.w3schools.com/css/css_dropdowns.asp

Надеюсь, это поможет.

Answer 2

Эту проблему можно решить, создав класс css и добавив его к первому mat-icon в вашем ng-container.

Класс css, который вы можете использовать:

    .fb1
    {
       margin-left:-6rem;
       margin-top:.3rem;
    }

И вы должны добавить его к этому элементу.

<ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element; let i = index">
        <div [ngClass]="showFloatingButtons[i] == true ? 'floating-pane-active' : 
'floating-pane-deactive'" class="button-row" style="">        

<!--Css Class fb1 added below-->
            <mat-icon mat-fab *ngIf="showFloatingButtons[i]== true" color="primary" 
class="floating-buttons fb1">offline_pin
            </mat-icon>
<!--Css Class fb1 added above-->

            <mat-icon mat-fab *ngIf="showFloatingButtons[i] == true" color="primary" class="floating-buttons fb2">query_builder
            </mat-icon>
            <mat-icon mat-fab *ngIf="showFloatingButtons[i] == true" color="primary" class="floating-buttons " disabled>restore
            </mat-icon>
            <mat-icon mat-fab *ngIf="showFloatingButtons[i] == true" color="primary" class="floating-buttons ">
                play_circle_filled</mat-icon>
            <mat-icon (click)="toggleFloat(i)" class="sky_blue">more_horiz</mat-icon>
        </div>
    </td>
</ng-container>

Обратите внимание, что текст начнет перекрываться на экранах меньшего размера, поэтому вы можете захотеть использовать Javascript, чтобы скрыть текст столбца Weight и /или переместите колонку символов дальше, когда кнопка нажата на экранах меньшего размера.

Answer 3

Это не имеет ничего общего с z-index. Если вы хотите, чтобы ваш столбец имел заданную ширину, установите для его свойства width CSS фиксированное значение!