How to fix the problem in space of listing data in html?

#1

Friends,

I have a form with a search in ionic to show it’s result … when search the data show using html

 <div *ngIf="result?.length > 0" class="row header">
                <div class="col">#</div>
                <div class="col" width="50%">Owner</div>
                <div class="col">Door No</div>
                <div class="col"></div>
            </div>
            <div class="row" *ngFor="let searchdata of result; let i = index">
                <div class="col">{{i + 1}}</div>
                <div class="col" width="50%">{{searchdata.chvOwners}} </div>
                <div class="col">{{searchdata.WardNoDoorNo}}</div>
                <div class="col">
                <button ion-button color="secondary" (click)="showDetails(searchdata.numBuildingID,this.lbid,searchdata.numZoneId,0,4)">
                Show</button> 
                </div>
            </div>

But when show result , there is a size mismatch in display as you see in image

pblminview
pblminview.jpeg540x960 41.1 KB

in above image you can see the discrepancy of ‘Owner’ and below name . How to fix this…

my relevant css is

page-property-tax {

    body {
        cursor: url('https://ionicframework.com/img/finger.png'), auto;
      }
      
      .header .col {
        background-color:lightgrey;
      }
      
      .col {
        border: solid 1px grey;
        border-bottom-style: none;
        border-right-style: none;
      }
      
      .col:last-child {
        border-right: solid 1px grey;
      }
      
      .row:last-child .col {
        border-bottom: solid 1px grey;
      }

}

please advise

Thanks

Anes

#2

The data looks pretty much tabular to me. Why not use a good old html table and style it a bit?

#3

Dear @Sujan12,

I got solution from Max in Pakistan. My worked out solution is

<ion-grid *ngIf="result?.length > 0">
            <ion-row>
                <ion-col col-1>#</ion-col>
                <ion-col col-6>Owner</ion-col>
                <ion-col col-2>Door No</ion-col>
                <ion-col col-3></ion-col>
            </ion-row>
            <ion-row *ngFor="let searchdata of result; let i = index">
                <ion-col col-1>{{i + 1}}</ion-col>
                <ion-col col-6>{{searchdata.chvOwners}}</ion-col>
                <ion-col col-2>{{searchdata.WardNoDoorNo}}</ion-col>
                <ion-col col-3 ><button ion-button color="secondary" (click)="showDetails(searchdata.numBuildingID,this.lbid,searchdata.numZoneId,0,4)">
                    Show</button></ion-col>
            </ion-row>

        </ion-grid>

Thanks
Anes