не может удерживать cdk mat-menu в исходном положении при прокрутке страницы - PullRequest
Новая
       10

не может удерживать cdk mat-menu в исходном положении при прокрутке страницы

0 голосов
/ 24 февраля 2020

Я пытаюсь удерживать angular mat-menu CDK в фиксированном положении, но он продолжает показывать событие, когда я прокручиваю страницу. Ожидаемый результат будет вести себя как другие элементы на странице (это означает, что я хочу, чтобы он оставался на вершине, когда я прокручиваю страницу) Я пытался исправить это с помощью свойства css position, но ни одно из решений не помогло мне. Вот часть моего кода

.HTML


<button mat-button #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="VListmenu"> 
      <span >{{title}}</span>
      <fa-icon style="margin: auto 0;" class="text-white" [icon]="faChevronDown"></fa-icon>
 </button>


<mat-menu #VListmenu="matMenu" class="list-search-menu" [overlapTrigger]="false">
                              <div class="container" (click)="$event.stopPropagation()">

                                    <div class="flex-zone" (click)="$event.stopPropagation()">


                                        <div *ngIf="category == 'vehicule'">
                                            <label class="search-area">
                                                <i class="fa fa-search"></i>
                                                <input type="text" placeholder="chercher" name="search" class="search-input" (input)="readInput($event)">
                                            </label>
                                        </div>

                                        <div *ngIf="showSelect" class="float-right-select" >
                                            <mat-form-field class="event-type">
                                                <mat-select [(value)]="selectedState" (selectionChange)="onChangeState($event)" id="searchBoxValue">
                                                    <mat-option value="all">Tous</mat-option>
                                                    <mat-option value="active">Actif</mat-option>
                                                    <mat-option value="notactive">Non Actif</mat-option>
                                                </mat-select>
                                            </mat-form-field>                        
                                        </div>
                                    </div>

                                    <div *ngIf="showSelectAll" class="float-right-select-all" (click)="$event.stopPropagation()">
                                        <!-- [indeterminate]="SelectedTypes.length > 0 && SelectedTypes.length < items.length" -->
                                        <mat-checkbox 
                                            color='warn' 
                                            [checked]="SelectedTypes.length == items.length"
                                            [indeterminate]="SelectedTypes.length > 0 && SelectedTypes.length < items.length"
                                            (change)="selectAll($event)" >
                                            Séléctionner Tous
                                        </mat-checkbox>

                                    </div>

                                        <mat-selection-list (click)="$event.stopPropagation()" disableOptionCentering class="virtual-scroll">
                                            <mat-list-item *ngFor="let item of items;let index=index;" (click)="onRowclicked(item, index, $event)" class="border border-warning title-field mb-1" [ngStyle]="{'background': item.checked? '#DAE1F7':'white'}">
                                                <mat-checkbox color='warn' (click)="onChangeCheckbox(item,index,$event)" [(ngModel)]="item.checked">
                                                    {{ item.name }}</mat-checkbox>
                                                </mat-list-item>
                                                <mat-list-item *ngIf='!allLoaded' (click)="loadMore($event)" class="border border-warning title-field mb-1 load_more_btn">
                                                    <span>
                                                        Charger plus
                                                    </span> 
                                        </mat-list-item>
                                        </mat-selection-list>

                                    </div>
                                </mat-menu>
...