ionic2ion-listion-grid

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


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 :

enter image description here

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!


Solution

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