How can I put loan detail and credit detail table below application detail which is an empty space

Question

I have four tables my page. One's size is almost the same as other three small table. I want to fit loan detail and credit detail table below application detail where there is enough empty space.

I am using flex layout for grid system. Is there any workaround to achieve this using fx flex property of flex layout.

stackblitz link

this is my html code

            <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>

Answer 1

You have added tables in different container which is creating different blocks. Application , loan and credit tables should be in single div with fxFlex="50%"

Also I have updated id of each table with class attribute and updated the css too to use class instead of id. Ids are unique in 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>

Updated stackblitz editor URL - https://stackblitz.com/edit/angular-flex-layout-seed-mnvyly

See the complete o/p here - https://angular-flex-layout-seed-mnvyly.stackblitz.io/