Ширина меню циновки динамически увеличивается / уменьшается в зависимости от количества дочерних элементов - PullRequest
Новая
       60

Ширина меню циновки динамически увеличивается / уменьшается в зависимости от количества дочерних элементов

0 голосов
/ 03 июня 2019

У меня есть всплывающее меню со списком предметов.Количество пунктов списка может варьироваться.Это может быть 2-5 или 40-50 в зависимости от содержимого массива.Когда элемент списка имеет больше данных, он должен быть таким, как показано ниже.Когда он имеет 1-10 элементов, он должен отображать только один элемент div, а ширина меню mat должна изменяться в зависимости от ширины дочернего элемента.enter image description here

Я уже прошел через это Как увеличить ширину элемента mat-menu? Но это не помогло мне.Сейчас я использую 

::ng-deep .cdk-overlay-pane .mat-menu-panel {
  min-width:800px !important;
}

вышеуказанный код, чтобы увеличить ширину панели меню.Но в моем случае ширина может быть 200, если в списке только 10 элементов, и 800, если в списке 40-50 элементов.Как я могу динамически регулировать ширину меню мата? 

<div class="user-name"
           [matMenuTriggerFor]="teamsMenu">
        <mat-icon>more_vert</mat-icon>
      </div>
<mat-menu #teamsMenu="matMenu"
                class="menu-width"
                yPosition="below"
                xPosition="after"
                [overlapTrigger]="false">
        <div fxLayout="row" #menuContainer>
          <div fxFlex="25" class="card-container" fxLayoutAlign="center center" fxLayout="column">
            <div class="card-user-name" style="cursor: pointer">
              {{userName | slice:0:1 | titlecase}}
            </div>
            <div class="name">{{userName}}</div>
            <div>{{teamName}}</div>
            <div>{{roleName}}</div>
          </div>
          <div fxFlex="0.25" style="background: whitesmoke; margin: 1rem 0 1rem 0;" class="card-separation"></div>
          <div fxFlex="">
            <mat-nav-list fxLayout="row wrap" fxLayoutGap="1em">
              <a class="team-selection-buttons" fxFlex="calc(25% - 1em)" mat-list-item *ngFor="let teamObj of teamArray;">
                <span class="team-selection-buttons-span">{{teamObj.team_name}}</span>
              </a>
            </mat-nav-list>
          </div>
        </div>
      </mat-menu>

Это часть HTML моего кода.

Я хочу увеличить / уменьшить ширину меню мата на основеколичество предметов у него есть.

...