Multiline item showing zic-zac while using text-wrap in ion-grid ionic 2

Question

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!

Answer 1

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.

Answer 2

Is it possible to change structure of components in html? If yes then have a try:

<div class="content-div-style">
    <ion-list class="list-style">
        <ion-item>
            <ion-grid no-padding>
                <ion-row *ngFor="let keyValue of caseDetailsJsonKeyValues">
                    <ion-col col-6 text-wrap>
                        <ion-label class="key-font-style">{{ keyValue }}</ion-label>
                    </ion-col>
                    <ion-col col-6 text-wrap>
                        <ion-label class="value-font-style">{{ faCaseDetails.case_details[keyValue] }}</ion-label>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </ion-item>
    </ion-list>
</div>