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.

Answer 1

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?