'Stack elements under each other inside ion-item

I am trying to stack items vertically under each other inside an ion-item:

<ion-item>    
  <ion-item-divider style="width: 100%;" item-content>
    <h4>Questions</h4>
  </ion-item-divider>
  <ion-item item-content style="width: 100%;" class="no-border">
    <label style="width: 100%;" item-content>This is a label</label>
  </ion-item>
  <ion-toolbar style="width: 100%;" item-content class="transparent-toolbar" text-center>
    <button ion-button icon-only type="button">
      <ion-icon name="add"></ion-icon>
    </button>
    <button ion-button icon-only type="button" >
      <ion-icon name="trash"></ion-icon>
    </button>
  </ion-toolbar>
</ion-item>

However it is not working and the output looks like this:

enter image description here

This is a STACKBLITZ that shows the problem.

angularcssionic-frameworkionic3


Solution 1:[1]

Use <ion-list> for this.

Demo on Stackblitz

<ion-list>
    <ion-item-divider style="width: 100%;" item-content>
        <h4>Questions</h4>
    </ion-item-divider>
    <ion-item item-content style="width: 100%;" class="no-border">
        <label style="width: 100%;" item-content>This is a label</label>
    </ion-item>
    <ion-toolbar style="width: 100%;" item-content class="transparent-toolbar" text-center>
        <button ion-button icon-only type="button">
            <ion-icon name="add"></ion-icon>
        </button>

        <button ion-button icon-only type="button">
            <ion-icon name="trash"></ion-icon>
        </button>
    </ion-toolbar>
</ion-list>

Solution 2:[2]

Ionic 6, use : https://ionicframework.com/docs/api/item-group

Item groups are containers that organize similar items together. They can contain item dividers to divide the items into multiple sections. They can also be used to group sliding items.

<ion-item-group>
    <ion-item>
       <ion-label>...</ion-label>
       <ion-button>...</ion-button>
    </ion-item>
    <ion-item>
       <ion-label>...</ion-label>
       <ion-button>...</ion-button>
    </ion-item>
</ion-item-group>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Krishna Rathore
Solution 2 jd314159

Related Questions