I have used ion-grid
from my list view and I am fetching data from server and showing it into list but while I am applying text-wrap
its not showing properly on ion-list
.
Please check below screen :
Code :
<div class="content-div-style">
<ion-list class="list-style">
<ion-grid no-padding>
<ion-row *ngFor="let keyValue of caseDetailsJsonKeyValues">
<ion-col col-6 text-wrap>
<ion-item>
<ion-label class="key-font-style">{{ keyValue }}</ion-label>
</ion-item>
</ion-col>
<ion-col col-6 text-wrap>
<ion-item class="column-remove-padding">
<ion-label class="value-font-style">{{ faCaseDetails.case_details[keyValue] }}</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>
</div>
Row height not increasing from 2nd column I need to increase bot column height and both row height will be same as per dynamic data.
Let me know if any one required more detail.
Thanks in advance!
After lots of search and R&D on above issue I sum up with below solution.
There is one property :
align-items-end
Above property line up your data in end of the row so will not show zic-zac design and almost I solve my issue by adding above property into ion-row
.
Check this full code:
<ion-list *ngSwitchCase="'case details'" class="list-style">
<ion-grid no-padding>
<ion-row *ngFor="let keyValue of caseDetailsJsonKeyValues; let i = index" align-items-end>
<ion-col col-6 text-wrap>
<ion-item class="key-column-remove-padding">
<ion-label class="key-font-style">{{ keyValue }}</ion-label>
</ion-item>
</ion-col>
<ion-col col-6 text-wrap>
<ion-item class="value-column-remove-padding">
<ion-label class="value-font-style">{{ faCaseDetails[keyValue] }}</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>
Hope this will helps other who has having same problem with ion-list
data.