mat-tab-group width не реагирует на ширину 100% контейнера в flex - PullRequest
Новая
       26

mat-tab-group width не реагирует на ширину 100% контейнера в flex

1 голос
/ 30 марта 2019

В настоящее время я работаю над проектом, который содержит дизайн flexbox, в котором mat-tab-group . Проблема, с которой я сталкиваюсь, заключается в том, что она не реагирует должным образом на ширину родителей, и кажется, что только свойство max-width в классе .parameters влияет на ширину. 

<div class="flex-container">
  <!-- there are other elements in here -->
  <div class="flex-item">
    <div class="parameters">
      <form [formGroup]="form">
        <mat-tab-group mat-stretch-tabs>
          <!-- tabs placed here -->
        </mat-tab-group>
      </form>
    </div>
  </div>
</div>

Удаление свойства mat-stretch-tabs тоже не помогает. Использование значения пикселя в качестве flex-based должно сделать вычисления ширины независимыми от содержимого. Но как только количество вкладок превысит целевую ширину, содержимое будет таким же широким, как mat-tab-group. Стиль вышеупомянутой структуры выглядит как 

.flex-container {
  display: flex;
}

.flex-item {
  flex: 1 1 250px;
}

.parameters {
  overflow: hidden;     /* tested, no impact */
  min-width: 0;         /* tested, no impact */
  max-width: 350px;     /* working but always 350px */
}

Я также протестировал свойство {width: 100%} на mat-tab-group, но оно также не оказывает никакого влияния. Следующее полностью удаляет горизонтальную прокрутку (и она использует /deep/, чего я хотел бы избежать). 

/deep/.mat-tab-label, /deep/.mat-tab-label-active{
  min-width: 0!important;
  padding: 3px!important;
  margin: 3px!important;
}

У вас есть идеи? Чего мне не хватает?

1 Ответ

1 голос
/ 11 апреля 2019

Это не проблема с mat-tab-group, но с настройками по умолчанию для flexbox, где элемент flex не может быть меньше его содержимого.

min-width: 0; для элемента flexbox переопределяет его.

благодарность этот ответ

...