Tenho uma nav
e dentro dela possuo um ícone de notificações.
Eu fiz um *ngIf
para mostrar um card quando o usuário clicar no ícone, posicionei esse card com position absolute, porém dentro do card eu possuo vários conteúdos que deve aparecer em demanda conforme o cliente clica no tópico, porém quando uso position absolute, meu card é expandido pra cima sempre que aparece um novo elemento, gostaria que ele mantesse sua posição.
Segue gif mostrando o problema:
Quando eu possuir muitos elementos abertos acredito que o botão de fechar e o card ficará escondido. Como posso resolver isso?
Segue meu html:
<nav class="navbar navbar-light fixed-top blue lighten-4">
<div (click)="abreMenu()" id="nav-icon4">
<i class="fa fa-bars"></i>
</div>
<div id="colunaTituloPagina">
<h2 class="tipografiaDash">{{nomePagina}}</h2>
</div>
<div id="divSino">
<i id="iconeSino" matBadge="22" matBadgeColor="warn" class="fa fa-bell animated swing infinite"></i>
</div>
<div id="cardNotificacao" class="card">
<div class="conteudoNotificacao">
<div id="headerNotificacao">
<h6 class="descricaoNotificacoes">Notificações</h6>
<i id="iconeFechaNotificacao" class="fa fa-close"></i>
</div>
<div class="card">
<h6 (click)="mostraPedidos = !mostraPedidos">Pedidos</h6>
<h6 class="animated fadeIn" *ngIf="mostraPedidos">Lorem ipsum blalalblab</h6>
</div>
</div>
</div>
</nav>
Meu css:
#iconeFechaNotificacao{
float: right;
position: absolute;
font-size: 25px;
color: #da1717;
top: 0;
right: 0;
margin: 10px;
}
#headerNotificacao{
display: inline-flex;
}
#cardNotificacao{
min-width: 320px;
padding: 30px;
position: absolute;
right: 0px;
margin: 5px;
margin-top: 30px;
}
Eu utilizo o Material Design Bootstrap