Угловой материал FlexLayout fxHide не скрывает - PullRequest
Новая
       25

Угловой материал FlexLayout fxHide не скрывает

0 голосов
/ 28 января 2019

Я работаю над мат-степпером с использованием flex-layout.Каждый шаг содержит и значок, и абзац, чтобы сделать его ответственным и более читабельным. Я хочу скрыть абзац на меньших экранах и оставить только значок.Насколько я понимаю, fxHide.lt-sm должен скрывать элемент, если разрешение ниже, чем маленькое, но, к сожалению, ничего не происходит, и это выглядит так: Изображение степпера (размер Galaxy S5)

Воткод: 

<mat-horizontal-stepper>
  <mat-step>
    <ng-template matStepLabel>
      <ul>
        <li>
          <mat-icon>format_list_numbered</mat-icon>
        </li>
        <li fxHide.lt-sm>
          <p>Grades</p>
        </li>
      </ul>
    </ng-template>
    <app-grades></app-grades>
  </mat-step>
  <mat-step label="Student">
    <ng-template matStepLabel>
      <ul>
        <li>
          <mat-icon>account_circle</mat-icon>
        </li>
        <li fxHide.lt-sm>
          <p>Student</p>
        </li>
      </ul>
    </ng-template>
    <app-user></app-user>
  </mat-step>
  <mat-step label="Teachers">
    <ng-template matStepLabel>
      <ul>
        <li>
          <mat-icon>people</mat-icon>
        </li>
        <li fxHide.lt-sm>
          <p>Teachers</p>
        </li>
      </ul>
    </ng-template>
    <app-teachers></app-teachers>
  </mat-step>
  <mat-step label="Messages">
    <ng-template matStepLabel>
      <ul>
        <li>
          <mat-icon>message</mat-icon>
        </li>
        <li fxHide.lt-sm>
          <p>Messages</p>
        </li>
      </ul>
    </ng-template>
    <app-messages></app-messages>
  </mat-step>
</mat-horizontal-stepper>

FxLayoutModule включен в импорт app.module.ts

...