0
I have a Dashboard, on which in a header I call a list after clicking a button. Everything is ok with return and sorting, my problem is in the matter of layout, I wish I had kept only overlapping with a card the rest of the page, as in this example of the image : 
But every time my list is displayed, it drops the content, as if it were two cards, according to the second image: 
Excerpt from the code:
<nb-card-header>
Dashboard - Campanhas
<nb-icon status="info" *ngIf="revealed.campanhas" class="toggle-icon" icon="chevron-up-outline" pack="eva"
(click)="toggleView('campanhas')"></nb-icon>
<nb-icon status="info" *ngIf="!revealed.campanhas" class="toggle-icon" icon="hard-drive-outline" pack="eva"
nbTooltip="Listagem de Campanhas" (click)="toggleView('campanhas')"> </nb-icon>
</nb-card-header>
<div *ngIf="revealed.campanhas">
<table class="tabela">
<nb-list>
<nb-list-item *ngFor="let i of campanhasPerfil" (click)="atualizarFiltro(i)">
<div>
{{i.nome_campanha}}
[{{i.codigo_campanha}}] <br>
De {{i.data_inicio_campanha | moment: 'DD/MM/YYYY'}}
Até {{i.data_fim_campanha | moment: 'DD/MM/YYYY'}}
</div>
</nb-list-item>
</nb-list>
</table>
</div>
I’d also like you to have that scroll bar next to it.
It’s something like what you have here on the Stack Overflow site. When you click on the "Latest messages in the Inbox icon".
Face the list has to be loaded inside a container that has a maximum height, type max-height:300px, and in this container you put overflow-y:auto; If you want to make an example, but he would not use your code, it would be just a didactic example for you to understand the technique.
– hugocsl
@hugocsl All right. I used the code reference to at least make clear the doubt. I used the list this way to display on the screen. If your example has the possibility of using these interpolations to render in HTML, fine.
– Wanderson Bueno