Multiple columns with different widths in Ionic item row

Question

I want to have an Ionic list with 3(or 4, see below) columns:

first column would be a tappable icon
second column would be where the list item text would be displayed
third column would be a tappable icon
fourth column would be a chevron, which when tapped should go to the items details. I know that you can add a chevron on the ion-item with a modifier, but I only want the right side of the list item (where the chevron is) to push to the details page. Since I'll have multiple other tappable icons on the list item, I don't want them to get mixed up.

I tried the following thing:

<ion-list class="plan-list">
  <ion-item  class="plan" text-wrap detail-push *ngFor="let item of items">
    <ion-grid>
      <ion-row>
        <ion-col col-2 class="plan-left" style="border-right:2px solid #A6A6A6">
              //tappable icon which has a fixed size, and should always be centered both vertically and horizontally in it's place
        </ion-col>

        <ion-col col-7 class="plan-right">
          <div class="plan-name">{{item.Name}}</div>
        </ion-col>
        <ion-col col-1 class="plan-right">
          <div>
            <img class="plan-image-icon" src="icons/documentIcon.png" width="20px"/>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-item>

I tried to use the col-x modifiers for column width, but I need to be able to fine-tune them a little bit more.

Here's a picture of how I want it to look:

Red part is the tappable icon: notice it's rectangular shape, meaning, that if the items height is not forced to change (due to text-wrap), then it should be rectangular => width has to be the same as height of ion-item (???)
Green part is where the title goes, this is where multiple lines of text can appear, and it has to be wrapped
Blue part is where the tappable icon should go (it's narrow, but it should be clickable)
Light blue part is where the chevron would be.

I am unsure if I can put ion-grid inside an ion-item tag, but I've found some random examples online. Please let me know how should I continue with this setup.

I want to have a responsive design, the Green part where the text goes should change it's width according to the screen width, if that's possible.

Manel Alonso Manel Alonso · Accepted Answer · 2018-04-27T12:35:29

The setup is right.

The thing is that on your grid you are setting 10 columns instead of 12. This should work:

<ion-list class="plan-list">
  <ion-item  class="plan" text-wrap detail-push *ngFor="let item of items">
    <ion-grid>
      <ion-row>
        <ion-col col-2 class="plan-left" style="border-right:2px solid #A6A6A6">
              //tappable icon which has a fixed size, and should always be centered both vertically and horizontally in it's place
        </ion-col>

        <ion-col col-9 class="plan-right">
          <div class="plan-name">{{item.Name}}</div>
        </ion-col>
        <ion-col col-1 class="plan-right">
          <div>
            <img class="plan-image-icon" src="icons/documentIcon.png" width="20px"/>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-item>

Also i noticed that you are missing a column with the chevron. Might try to add it?

Multiple columns with different widths in Ionic item row

1 Answers