Search code examples
htmlcssreactjsionic-frameworkgrid

How to resize content of Ionic grid to a fixed height without scroll

I'm trying to create a grid of columns and rows using the Ionic Framework. My goal is IonGrid taking the remaining available height while displaying the entire content without having to scroll to reveal hidden content outside the viewport. The content (columns & rows) must therefore resize in order to show everything at once. This must result in everything being very small, but at least it is there for the viewing.

I'm using React v18.2.0 and Ionic/React v7.0.0

and here is a terrible paint job illustrating my issue. The last row is cut off with the green part being outside the viewport requiring the user to scroll in order to reveal it. The entire grid must therefore fit on the available space, but resize to do so.

Here is an example of my current component:

        <IonContent>
        <IonGrid>
            <IonRow>
                <IonCol size="4">
                    <IonRow>
                        ... content
                    </IonRow>
                    <IonRow>
                        ... content
                    </IonRow>
                </IonCol>
                <IonCol size="4">
                    <IonRow>
                        ... content
                    </IonRow>
                    <IonRow>
                        ... content
                    </IonRow>
                </IonCol>
                <IonCol size="4">
                    <IonRow>
                        ... content
                    </IonRow>
                    <IonRow>
                        ... content
                    </IonRow>
                </IonCol>
            </IonRow>
            <IonRow>
                <IonCol size="12">
                    ... content
                </IonCol>
            </IonRow>
        </IonGrid>
    </IonContent>

I tried experimenting with setting the maxHeight, height, overflow on both the IonContent and IonGrid without any luck. I'm aware of the scrollY prop of IonGrid, and setting it to false does prevent any scrolling from being possible. However, then the rest of the content within the IonGrid is hidden further down the page without the chance of seeing it.

Is it possible to customize the IonGrid to solve this while also having a responsive system or am I best off doing this with regular CSS?

Solution

  • if you want the entire grid fit on the available space, but also resize you can set display: grid and height css property on ion-grid.

    I have created a sample of what you need. Check the link: https://stackblitz.com/edit/angular-64dqr3?file=src/main.tsx

    CSS

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ion-grid {
  background-color: red;
  height: 100vh;
  overflow: auto;
  display: grid;
}
ion-col {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  background-color: #135d54;
  border: solid 1px #fff;
  color: #fff;
}