How to enable horizontal scroll on IonGrid using Ionic 5-React

Question

How to enable horizontal scroll on IonGrid with IonCard. below is the code i am trying to enable the horizontal scroll so that all fields will be shown in the same row on any device or browser

                  
                 <IonCard>
                  <IonCardHeader> </IonCardHeader>
                  <IonCardContent>
                  <IonGrid>
                    <IonRow key={index} className="ion-nowrap">
                      <IonCol size="12" size-md="4">
                        <IonItem>
                          <IonLabel>Test1</IonLabel>
                          <IonInput />
                        </IonItem>
                      </IonCol>
                      <IonCol size="12" size-md="4">
                        <IonItem>
                          <IonLabel>Test2</IonLabel>
                          <IonInput />
                        </IonItem>
                      </IonCol>
                      <IonCol size="12" size-md="4">
                        <IonItem>
                          <IonLabel>Test3</IonLabel>
                          <IonInput />
                        </IonItem>
                      </IonCol>
                      <IonCol size="12" size-md="4">
                        <IonItem>
                          <IonLabel>Test4</IonLabel>
                          <IonInput />
                        </IonItem>
                      </IonCol>
                </IonRow>
            </IonGrid>
        </IonCardContent>
</IonCard>

Just wrap ur card/cards within an ionRow and that should give u the result u need and for better scroll experience use slider and slides to enable flixible horizontal scrolling that in case u don't have enough experience to add some css to make ionRow scrollable.. — Mostafa Harb, Jan 03 '21 at 01:22

score 2 · Accepted Answer · answered Jan 09 '21 at 20:21

2

flex-wrap: nowrap;
overflow-x: scroll!important;
overflow-y: hidden;

answered Jan 09 '21 at 20:21

ane

101
3
10

score 1 · Answer 2 · answered Dec 31 '22 at 14:58

In your html file do this.

<ion-grid>
<ion-row class="scroll">
<ion-col>
<img src="https://www.google.com/logos/doodles/2022/new-years-eve-2022-6753651837109565.4-ladc.gif">
</ion-col>
</ion-row>
</ion-grid>

And in your CSS do this.

 .scroll{
    flex-wrap: nowrap;
    overflow-x: scroll!important;
    overflow-y: hidden;
    }

How to enable horizontal scroll on IonGrid using Ionic 5-React

2 Answers2