Can we have 3 columns in Ion-Item

Ionic Framework ionic-v3
1

I have a requirement where in i require 3 controls in an ion-item and also need an ion-item-sliding functionality to remove a particular row. Attaching an image for a better understanding. Whenever i try to include ion-input text i am not getting all the controls to for in a row. Kindly help me.image

2

Hi,
Could you share your code please.

3
{{saleLoanItem.name}}
{{saleLoanItem.name}} {{saleLoanItem.action}}
Remove

Whenever i uncomment the numeric textbox, row disappears.

4

Sorry, I mean can you share your html code of the ion-slide and the typescript. So we can get an understanding and debug what is wrong.
Without code, then other people wont be able to help.

5 
<ion-grid>
            <ion-list>
                <ion-item-sliding>
                    <ion-item *ngFor="let saleLoanItem of transactionItems">
                        <div *ngIf="saleLoanItem && saleLoanItem.name">{{saleLoanItem.name}}</div>     
                        <!--<div><ion-input type="number" pattern="[0-9]*" min="0" max="10" placeholder="Qty"></ion-input></div>-->
                        <!--<h2 *ngIf="saleLoanItem && saleLoanItem.name">{{saleLoanItem.name}}</h2>                                                                                         -->
                        <div *ngIf="saleLoanItem && saleLoanItem.name">{{saleLoanItem.name}}                            
                        <button ion-button  *ngIf="saleLoanItem && saleLoanItem.action" (click)="checkoutModal()">{{saleLoanItem.action}}</button>
                        </div>
                    </ion-item>               
                    <ion-item-options side="left">                           
                    <button ion-button color="danger"(click)="remove(saleLoanItem)"><ion-icon name="close"></ion-icon>Remove</button>
                    </ion-item-options>
                </ion-item-sliding>
                </ion-list>
        </ion-grid>
6

transactionItems from html is just returning a list from typescript file.

7

For the 3 controls, I think this will help you… Ionic Demo: UI Components & API Customization to Create Interface

The input number seems to be stretched in ionic to take all space. So it would take over the item, unless you make a new item below with your input inside.
This is just a recommendation, but since you are making a phone app, it would be hard for some people to click up or down on the inputs. So I found this… Ionic Demo: UI Components & API Customization to Create Interface

You should move the *ngFor in the ion-item-sliding and remove the ion-grid…Unless you are having a use for it somewhere else.

 <ion-list>
        <ion-item-sliding *ngFor="let saleLoanItem of transactionItems">
            <ion-item>

I hope you get your answer you are looking for. Sorry if I might of misunderstood your question.

8

As per your instructions moved the *ngFor in the ion-item-sliding and after uncomment the input number, the rest controls are not visible. Only the input number text is displayed in ion-item.

9

replace the div with ion-item like this.
<ion-item><ion-input type="number" pattern="[0-9]*" min="0" max="10" placeholder="Qty"></ion-input></ion-item>

10

Thank you as i can now see all the controls as needed. Only thing is that using ion-item i am able to see all controls in row vertically.

11 
 <ion-list>
                <ion-item-sliding *ngFor="let saleLoanItem of transactionItems">
                    <ion-item>                            
                        <ion-item width-30 *ngIf="saleLoanItem && saleLoanItem.name">{{saleLoanItem.name}}</ion-item>                                                     
                        <ion-item width-30 *ngIf="saleLoanItem && saleLoanItem.name">{{saleLoanItem.name}}</ion-item>
                        <ion-item><ion-input type="number" pattern="[0-9]*" formControlName="salequantity" [(ngModel)]="salequantity" min="0" max="10" placeholder="Qty"></ion-input></ion-item>
                        <ion-item><button ion-button width-30  *ngIf="saleLoanItem && saleLoanItem.action" (click)="checkoutModal()">{{saleLoanItem.action}}</button></ion-item>                            
                    </ion-item>               
                    <ion-item-options side="left">                           
                    <button ion-button color="danger"(click)="remove(saleLoanItem)"><ion-icon name="close"></ion-icon>Remove</button>
                    </ion-item-options>
                </ion-item-sliding>
                </ion-list>

This is my Html as of now.

12

I did not mean to change all the divs.
Just one div, like this.

<ion-list>
  <ion-item-sliding *ngFor="let saleLoanItem of transactionItems">
    <ion-item>                            
      <h1 width-30 *ngIf="saleLoanItem && saleLoanItem.name">{{saleLoanItem.name}}</h1>                                                     
      <h4 width-30 *ngIf="saleLoanItem && saleLoanItem.name">{{saleLoanItem.name}}</h4>
      <ion-item>
        <ion-input type="number" pattern="[0-9]*" formControlName="salequantity" [(ngModel)]="salequantity" min="0" max="10" placeholder="Qty"></ion-input>
        <button ion-button width-30  *ngIf="saleLoanItem && saleLoanItem.action" (click)="checkoutModal()">{{saleLoanItem.action}}</button>
      </ion-item>                            
    </ion-item>               
    <ion-item-options side="left">                           
      <button ion-button color="danger"(click)="remove(saleLoanItem)"><ion-icon name="close"></ion-icon>Remove</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>