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
– Saymon
I’ve done it, it doesn’t work either.
– Luan Calil