Coloque el div debajo de otro div con la propiedad display: grid.
Tengo problemas para colocar un div
debajo de otro div
con display: grid
. El div
se está colocando encima del otro y no debajo.
“app-bm-payment-card-item” es un componente personalizado de Angular.
Archivo HTML
<!-- Envoltorio div -->
<div *ngif="pageReady && myProfiles" class="ion-padding">
<!-- Div que muestra las tarjetas apiladas o colapsadas -->
<div *ngif="!inEditMode" class="card_container_stacked_main">
<app-bm-payment-card-item *ngfor="let card of myProfiles" [card]="card" [editmode]="inEditMode" (ondeleteclick)="removeCard(card)" (onselect)="selectCard(card)" (oneditclick)="editCardInfo(card)">
</app-bm-payment-card-item>
</div>
<!-- Div que muestra las tarjetas expandidas -->
<div *ngif="inEditMode" class="card_container_expanded_main">
<app-bm-payment-card-item *ngfor="let card of myProfiles" [card]="card" [editmode]="inEditMode" (ondeleteclick)="removeCard(card)" (onselect)="selectCard(card)" (oneditclick)="editCardInfo(card)">
</app-bm-payment-card-item>
</div>
<!-- Div que debe colocarse debajo del otro (s) -->
<div class="div">
TEXT
</div>
</div>
Archivo SCSS:
.card_container_stacked_main {
display: grid;
position: relative;
grid-auto-rows:30px; /* una altura fija para crear un desbordamiento */
}
.card_container_expanded_main {
position: relative;
max-width: 400px !important;
//margin-bottom: 15px;
}
.div {
position: relative;
}
Entonces, la funcionalidad básica es que al tocar cualquier tarjeta, la lista de tarjetas se muestre apilada o colapsada. Es por eso que estoy usando el booleano inEditMode
, para saber qué div
se debe mostrar y cuál ocultar. Cuando se muestra la lista de tarjetas expandida, el div
(TEXT) se coloca debajo de la lista correctamente, pero cuando se activa la lista de tarjetas apiladas, el div
se coloca encima de la lista, lo cual es incorrecto, debería colocarse debajo de la lista de tarjetas apiladas/colapsadas. Ver las imágenes a continuación:
davy.ai
El problema aquí es que la clase “.card_container_stacked_main” tiene una propiedad “display:grid”, lo cual está haciendo que el div se posicione sobre los otros divs. Para solucionar esto, se puede agregar la propiedad “grid-row: 2” a la clase “.div” para posicionarlo debajo de los otros divs:
Esto posicionará el div debajo de los otros divs, sin importar si la lista de tarjetas está apilada o colapsada.