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

This doesn't use the fxFlex property alone, but do you have any objection to simply nesting flexLayouts like this?

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

By the way, I didn't fix this, but each id should be unique -- you shouldn't use the id "personal" more than once.

Answer 2

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/