Tengo cuatro tablas de mi página. El tamaño de uno es casi el mismo que el de otras tres mesas pequeñas. Quiero ajustar la tabla de detalles del préstamo y del crédito debajo del detalle de la solicitud donde haya suficiente espacio vacío.
Estoy usando un diseño flexible para el sistema de cuadrícula. ¿Hay alguna solución para lograr esto usando la propiedad fx flex del diseño flexible?
Este es mi código html
<div class="container" fxLayout fxLayout.xs="column">
<div class="item item-1" fxFlex="50%">
<table id="customers" *ngIf="customerData">
<caption class="caption">
<h4>Customer Details</h4>
</caption>
<tr *ngFor="let item of customerData">
<td width="50%">
{{item.key}}
</td>
<td width="50%">{{item.value}}</td>
</tr>
</table>
</div>
<div class="item item-2" fxFlex="50%">
<table id="customers" *ngIf="applicationData">
<caption class="caption">
<h4>Application Details</h4>
</caption>
<tr *ngFor="let item of applicationData">
<td width="50%">
{{item.key}}
</td>
<td width="50%">{{item.value}}</td>
</tr>
</table>
</div>
</div>
<div class="container" fxLayout fxLayout.xs="column">
<div class="item item-1" fxFlex="50%">
<table id="customers" *ngIf="loanData">
<caption>
<h4>Loan Details</h4>
</caption>
<tr *ngFor="let item of loanData">
<td width="50%">
{{item.key}}
</td>
<td width="50%">{{item.value}}</td>
</tr>
</table>
</div>
<div class="item item-2" fxFlex="50%">
<table id="customers" *ngIf="creditData">
<caption>
<h4>Credit Details</h4>
</caption>
<tr *ngFor="let item of creditData">
<td width="50%">
{{item.key}}
</td>
<td width="50%">{{item.value}}</td>
</tr>
</table>
</div>
</div>
2 respuestas
Ha agregado tablas en diferentes contenedores que están creando diferentes bloques. Las tablas de solicitud, préstamo y crédito deben estar en un solo div con fxFlex = "50%"
También he actualizado la identificación de cada tabla con el atributo de clase y también he actualizado el CSS para usar la clase en lugar de la identificación. Los identificadores son únicos en DOM.
<div class="bounds">
<div class="container" fxLayout fxLayout.xs="row">
<div class="item item-1" fxFlex="50%">
<table class="personal" *ngIf="customerData">
<caption class="caption">
<h4>Customer Details</h4>
</caption>
<tr *ngFor="let item of customerData">
<td width="50%">
{{item.key}}
</td>
<td width="50%">{{item.value}}</td>
</tr>
</table>
</div>
<div class="item item-2" fxFlex="50%">
<table class="personal" *ngIf="applicationData">
<caption class="caption">
<h4>Application Details</h4>
</caption>
<tr *ngFor="let item of applicationData">
<td width="50%">
{{item.key}}
</td>
<td width="50%">{{item.value}}</td>
</tr>
</table>
<table class="personal" *ngIf="loanData">
<caption>
<h4>Loan Details</h4>
</caption>
<tr *ngFor="let item of loanData">
<td width="50%">
{{item.key}}
</td>
<td width="50%">{{item.value}}</td>
</tr>
</table>
<table class="personal" *ngIf="creditData">
<caption>
<h4>Credit Details</h4>
</caption>
<tr *ngFor="let item of creditData">
<td width="50%">
{{item.key}}
</td>
<td width="50%">{{item.value}}</td>
</tr>
</table>
</div>
</div>
</div>
URL actualizada del editor stackblitz - https://stackblitz.com/edit/angular-flex -layout-seed-mnvyly
Vea el o / p completo aquí: https: // angular-flex-layout-seed -mnvyly.stackblitz.io/
Esto no usa solo la propiedad fxFlex, pero ¿tiene alguna objeción a simplemente anidar flexLayouts como este?
<div class="bounds">
<div class="container" fxLayout fxLayout.xs="row">
<div class="item item-1" fxFlex="50%">
<table id="personal" *ngIf="customerData">
<caption class="caption">
<h4>Customer Details</h4>
</caption>
<tr *ngFor="let item of customerData">
<td width="50%">
{{item.key}}
</td>
<td width="50%">{{item.value}}</td>
</tr>
</table>
</div>
<div class="item item-2 container" fxFlex="50%" fxLayout fxLayout="column">
<table id="personal" *ngIf="applicationData" fxFlex>
<caption class="caption">
<h4>Application Details</h4>
</caption>
<tr *ngFor="let item of applicationData">
<td width="50%">
{{item.key}}
</td>
<td width="50%">{{item.value}}</td>
</tr>
</table>
<table id="personal" *ngIf="loanData" fxFlex>
<caption class="caption">
<h4>Loan Details</h4>
</caption>
<tr *ngFor="let item of loanData">
<td width="50%">
{{item.key}}
</td>
<td width="50%">{{item.value}}</td>
</tr>
</table>
<table id="personal" *ngIf="creditData" fxFlex>
<caption class="caption">
<h4>Credit Details</h4>
</caption>
<tr *ngFor="let item of creditData">
<td width="50%">
{{item.key}}
</td>
<td width="50%">{{item.value}}</td>
</tr>
</table>
</div>
</div>
</div>
Por cierto, no solucioné esto, pero cada identificación debe ser única; no debe usar la identificación "personal" más de una vez.