Putting fixed items on a list

Asked

Viewed 29 times

0

Could someone help me? I have the following problem. I have to put two fixed items in a list, I’ve tried to use the position Fixed and Sticky but it didn’t work. I’ll leave the code below. I need to keep those two mat-list-item fixed when rolling the scrol

<mat-drawer
                #drawer
                mode="side"
                disableClose="true"
                opened="true"
                position="start"
            >
                <mat-nav-list>
                    <mat-list-item
                        class="text-primary"
                        (click)="abrirOpcoes()"
                        [class.lista-alinhar-centro]="!menu.esquerda"
                    >
                        <mat-icon mat-list-icon style="font-size: 15px; margin-left: 10px"
                            >build</mat-icon
                        >
                        <h4 mat-line *ngIf="menu.esquerda">Opções</h4>
                    </mat-list-item>

                    <mat-list-item
                        (click)="menu.esquerda = !menu.esquerda"
                        class="lista-alinhar-centro"
                    >
                        <mat-icon mat-list-icon style="font-size: 15px; margin-left: 10px">
                            {{ menu.esquerda ? 'chevron_left' : 'chevron_right' }}
                        </mat-icon>
                    </mat-list-item>
                    <mat-list-item
                        *ngFor="let item of grupoCarregado; let i = index"
                        [class.active]="i === indexTab"
                        (click)="changeTab(i)"
                    >
                        <div
                            mat-list-icon
                            class="text-center"
                            style="font-size: 15px; margin-top: 3px"
                            [class.lista-alinhar-centro]="!menu.esquerda"
                        >
                            <span
                                style="margin-left: 3px"
                                class="badge badge-pill badge-{{ situacao(i).cor }}"
                            >
                                {{ i + 1 }}
                            </span>
                        </div>

                        <h4 mat-line *ngIf="menu.esquerda" style="font-size: 15px">
                            {{
                                ((item.lancamento
                                    ? item.lancamento.get('dataVencimento').value
                                    : item.resumo.dataVencimento
                                ) | date: 'shortDate') || 'Sem Data'
                            }}
                        </h4>

                        <button
                            type="button"
                            *ngIf="menu.esquerda"
                            mat-icon-button
                            (click)="remover(i)"
                        >
                            <mat-icon class="mat-24" style="font-size: 15px">delete</mat-icon>
                        </button>
                    </mat-list-item>
                </mat-nav-list>
            </mat-drawer>
  • Hello Luan all right? So you already tried to inspect the element generated by the <mat-list-item> component and attack the generated html with position: Fixed

  • I’ve done it, it doesn’t work either.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.