CODEWITHSUNDEEP
htmlcssionic-frameworkandroid-listviewionic4
Sami
Sami

Reputation: 3800

Text (label) is not taking all available space in ionic list

I am newbie to Ionic and mobile development. I am using ionic list, how to make text full available screen (see Last received in picture) and is it okay to use <ion-label> around <h4> and <p>? 

<ion-list>
<ion-item *ngFor ="let connection of connections">
  <ion-avatar slot="start">
    <img [src]="connection?.picture">
  </ion-avatar>
<ion-label text-wrap>
  <h4>{{ connection?.name}}</h4>
  <p text-wrap> Last received:  {{ connection?.locationDesc }}</p>
</ion-label>

<ion-label slot="end" text-right>
  <p item-end> 2 Messages </p>
  <ion-button clear slot="end">View</ion-button>
</ion-label>          
</ion-item>

enter image description here

Upvotes: 0

Views: 682

Answers (1)

rtpHarry
rtpHarry

Reputation: 13125

It looks like it's just taking a little bit but what its actually doing is sharing 50 50 with the two labels you have put in to use as columns. It looks like its taking less than half because of the word-wrapping.

This is because labels are styled as flex items with those rules.

I managed to get it to this:

enter image description here

By using this code:

  <ion-list>
    <ion-item>
      <ion-avatar slot="start">
        <img src="/assets/matthew.jpg">
      </ion-avatar>
      <ion-label  class="ion-text-wrap">
        <h4>Some name</h4>
        <p> Last received: All plugins have two components - the native code (Cordova) and the
          JavaScript code. Cordova plugins are also wrapped in a Promise or Observable in order to provide a common
          plugin interface. Below are various framework options using the Camera plugin as an example. </p>
      </ion-label>
      <ion-note class="ion-text-end">
        <p> 2 Messages </p>
        <ion-button clear>View</ion-button>
      </ion-note>
    </ion-item>
  </ion-list>

Basically I swapped the last ion-label to be an ion-note instead.

I have also messed around with other things like removing slots that weren't required and converting the attributes to appropriate utility classes which is now considered a best-practice (since they introduced react and vue which don't support these attributes).

Upvotes: 1

Related Questions