Horizantal scroll with Multiple items IONIC 2

Ionic Framework ionic-v3
1

I’m trying to achieve the following design

my HTML

<ion-content>
 <ion-item>
   <div id="addmnydiv"  >
      <h6>Add Money</h6>
      
       <ul class="horizontal">
     <li>
       <div class="dsdd" style="width:Auto;height:80px;border:0px solid #000;" >
       <img  src="/img/Add money/credit.png" style="Height:60px;Width:60px; " alt="profilePhoto" >
     <ion-label>Credit card</ion-label>
       </div>
     </li>
     <li>
      <div style="width:Auto;height:80px;border:0px solid #000;">
       <img  src="/img/Add money/debit.png" style=" Height:60px;Width:60px" alt="profilePhoto">
     <ion-label>Debit card</ion-label>
       </div>
     </li>
     <li>
       <div style="width:Auto;height:80px;border:0px solid #000;">
       <img  src="/img/Add money/ibank.png" style=" Height:60px;Width:60px" alt="profilePhoto">
     <ion-label>Net banking</ion-label>
       </div>
     </li>
    <li>
       <div style="width:Auto;height:80px;border:0px solid #000;">
       <img  src="/img/Add money/imps.png" style=" Height:60px;Width:60px" alt="profilePhoto">
     <ion-label center>IMPS</ion-label>
       </div>
     </li>
      
    
</ul>
   </div>
   </ion-item>
</ion-content>

my SCSS

.horizontal li {
    display: inline-block;
    margin-left: 0px;
   margin-top: 0px;
    border-spacing: 0;
     overflow: hidden;
      margin-left: -30px ;
      padding: 0px;
  // overflow-x: scroll;
     padding: 20px  ;
}

#addmnydiv
{
 
  // padding: 0px;
    width: auto;
    height:auto;
    // border: 13px solid #bed5cd;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    margin-top: 0px;
  
}

I even tried with <ion-Scroll>

Is there something I’. Missing .Any help will be Thankful…

1 Like