How to display inline items inside ion-item-sliding

Ionic Framework ionic-v3
1

would like to display as inline-block the image and other items all inside ion-item-sliding

like the documentation: https://ionicframework.com/docs/api/components/item/ItemSliding/

you can see the virtual phone for understanding what I mean

my code here

<ion-list *ngFor="let dev of developers" >
    <ion-item  hidden > <!--this is hidden -->

        <ion-input [(ngModel)]="developer.favid" value="{{ dev.favid }}"  ></ion-input>
  </ion-item>
  <ion-item-sliding>
      <!--     -->
      <ion-grid>      
      <ion-row>

            <ion-col col-3 >
       
               <ion-item style="float:left;">
                  <ion-thumbnail item-left>
                    <img src="{{dev.img}}" width="10%" height="10%" />
                  </ion-thumbnail>
               </ion-item>   
           <!--  -->    
              </ion-col>
           

            <ion-col col-9 >
          
             
                    <ion-item>
                      <h2>{{ dev.title }} </h2>
                  
                    <p>{{ dev.categorie }} </p>

                    <p>{{ dev.favid }} </p>
                  </ion-item> 
         
    <!-- --> </ion-col>

      </ion-row>
      </ion-grid>
  
  
        <ion-item-options >
          <button ion-button (click)="deleteDeveloper(developer.favid)"><ion-icon name="trash"></ion-icon> Delete</button>
        </ion-item-options>

</ion-item-sliding>
</ion-list>

this code diplay nothing when running

any suggestion plz

2

Hi

It would not cross my mind to put a grid in a item-sliding, for starter

Maybe you need to build the code up from the ionic code example, not using variables, then slowlt add the ionic components to see if it at all will work

And then add the bindings (using [] btw)

Regards

Tom

3

Im not understand exactly what you mean,
how then the maker’s documentation do that ( if you check the URL the code is different than phone view content )

as you can see I need grid system to make two col
from where can get code example to make correction ??

4

Hi

I suggest you build the html code using no {{ }} and functions etc. So no logic. If you manage to build the UI, then add the logic.

And I suggest to start with the item-sliding example in the ionic documentation and then add one piece at a time, assuring continuously that the code works. Then you will find where it hurts.

<ion-list>
  <ion-item-sliding #item>
    <ion-item>
      Item
    </ion-item>
    <ion-item-options side="left">
      <button ion-button (click)="favorite(item)">Favorite</button>
      <button ion-button color="danger" (click)="share(item)">Share</button>
    </ion-item-options>

    <ion-item-options side="right">
      <button ion-button (click)="unread(item)">Unread</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

It is not easy to debug code I wouldn’t build in the first place.

Regards
Tom

5

finaly i got it :slight_smile:

i think ionic framework set css by default so
im just make this custumazation

<ion-list *ngFor="let dev of developers" >
    <ion-item  hidden > <!--this is hidden -->

        <ion-input [(ngModel)]="developer.favid" value="{{ dev.favid }}"  ></ion-input>
   </ion-item>
  <ion-item-sliding >
      <!--     
      <ion-grid>      
      <ion-row>

            <ion-col col-3 >
       -->
               <ion-item >
                 
                  <ion-thumbnail item-left>
                    <img src="{{dev.img}}" width="10%" height="10%" />
                  </ion-thumbnail>
             
                   
          <!--    </ion-col>
            <ion-col col-9 >
         
-->  
                          
                            
                  <h2>{{ dev.title }} </h2>
                
                  <p>{{ dev.categorie }} </p>

                  <p>{{ dev.favid }} </p>
                </ion-item> 
    
        <!--  </ion-col>

          </ion-row>
          </ion-grid>
      -->
  
        <ion-item-options >
          <button ion-button (click)="deleteDeveloper(developer.favid)"><ion-icon name="trash"></ion-icon> Delete</button>
        </ion-item-options>

</ion-item-sliding>
</ion-list>

anyway tnx for you suggestion but this working for me

1 Like