0

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:

inserir a descrição da imagem aqui

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

1 Resposta 1

1

Faltou a propriedade top, que você pode usar o valor que achar melhor na distância do topo da página (ex. top: 10px;):

Coloquei um botão para retirar o top para ver o efeito.

function topo(){
   $("#cardNotificacao").css("top", "auto");
}
#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;
    top: 0; /* distância do topo */
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<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>
        <button style="left: -100px; position: relative;" onclick="topo()">Retirar o top</button>
    </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<br><br><br><br><br></h6>
            </div>
        </div>
    </div>

</nav>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .