Check out this image
I have a list of 10 names in an ion-scroll, but they are appearing on separate lines like paragraphs.
Below is my HTML code:
<ion-scroll scrollX="true" style="width:100vw; height:50px" >
<ion-row class="headerChip">
<div *ngFor="let tabName of product_type; let idx = index" [ngClass]="showSelectedTabArray[idx].showSelectedTab ? 'headerChipGray' : 'headerChipGreen'">
<ion-chip (click)="changeData(tabName)">
<ion-label >{{tabName.languagename}}</ion-label>
<div></div>
</ion-chip>
</div>
</ion-row>
</ion-scroll>
And here is the accompanying CSS:
.headerChipGray{
ion-chip.chip.chip-md{
margin: 2px;
border-radius: 10px;
border: 1px solid gray;
background: white;
}
ion-chip.chip.chip-ios{
margin: 2px;
border-radius: 10px;
border: 1px solid gray;
background: white;
}
}
.headerChipGreen{
ion-chip.chip.chip-md{
margin: 2px;
border-radius: 10px;
background: white;
color: #A80C50;
border: 1px solid #A80C50;
}
ion-chip.chip.chip-ios{
margin: 2px;
border-radius: 10px;
background: white;
color: #A80C50;
border: 1px solid #A80C50;
}
}
This code worked fine in Ionic 2, but after updating to Ionic 3, I'm encountering this issue. Any suggestions or insights from the Ionic documentation regarding the ion-scroll?