Ionic Elements lost their original position when the page decreases its size

Question

On this StackBlitz project: https://stackblitz.com/edit/ionic-react-demo-s368kk?file=App.jsx

I have the following code:

import React from 'react';
import { IonPage, IonContent, IonRow } from '@ionic/react';

const Button = ({ children }) => (
  <div
    style={{
      display: 'inline-block',
      backgroundColor: '#fff',
      padding: '12px 22px',
      margin: '10px 10px',
    }}
  >
    <span>{children}</span>
  </div>
);

const OptionsButtons = () => (
  <div style={{ textAlign: 'center' }}>
    <div>
      <Button>This is your Option Number 1</Button>
    </div>
    <div>
      <Button>This is your Option Number 2</Button>
    </div>
  </div>
);

const Delimiter = () => (
  <div>
    <span style={{ color: '#ff0' }}>==============================</span>
  </div>
);

const App = () => (
  <IonPage>
    <IonContent
      fullscreen
      className=""
      style={{
        '--ion-background-color': 'none',
        backgroundImage: `url('https://wallpaperaccess.com/full/1902544.jpg')`,
        backgroundPosition: 'center',
        backgroundSize: 'cover',
      }}
    >
      <IonRow
        style={{
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <OptionsButtons />
        <Delimiter />
        <OptionsButtons />
        <Delimiter />
        <OptionsButtons />
        <Delimiter />
        <OptionsButtons />
      </IonRow>
    </IonContent>
  </IonPage>
);

export default App;

Normally the page looks like on the image below when it has enough space:

Note that the elements are vertically aligned (which is a requirement for me).

But if I decrease the viewport size, then the elmements get reorganized around and lost their initial position as you can see on the image below:

I really need the elements to keep their original position as when they had enough space. It doesn't matter if the user has to scroll down in order to see the elements beyond the fold. But remember that when there is enough space, I need the elements to be vertically aligned.

Any idea on how to solve this?

If you want you can post your forked StackBlitz.

Thanks!

score 1 · Accepted Answer · answered Nov 08 '22 at 12:44

IonRow elements are meant to be used inside IonGrid. Outside of that, it might show buggy behaviour. try this:

import React from 'react';
import { IonPage, IonContent, IonRow, IonGrid } from '@ionic/react';

const Button = ({ children }) => (
  <div
    style={{
      display: 'inline-block',
      backgroundColor: '#fff',
      padding: '12px 22px',
      margin: '10px 10px',
    }}
  >
    <span>{children}</span>
  </div>
);

const OptionsButtons = () => (
  <div style={{ textAlign: 'center' }}>
    <div>
      <Button>This is your Option Number 1</Button>
    </div>
    <div>
      <Button>This is your Option Number 2</Button>
    </div>
  </div>
);

const Delimiter = () => (
  <div>
    <span style={{ color: '#ff0' }}>==============================</span>
  </div>
);

const App = () => (
  <IonPage>
    <IonContent
      fullscreen
      className=""
      style={{
        '--ion-background-color': 'none',
        backgroundImage: `url('https://wallpaperaccess.com/full/1902544.jpg')`,
        backgroundPosition: 'center',
        backgroundSize: 'cover',
      }}
    >

        <IonGrid>
          <IonRow
            style={{
              height: '100%',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <OptionsButtons />
            <Delimiter />
            <OptionsButtons />
            <Delimiter />
            <OptionsButtons />
            <Delimiter />
            <OptionsButtons />
          </IonRow>
      </IonGrid>
    </IonContent>
  </IonPage>
);

export default App;

also, not using IonCol might cause some bugs as well, I'd suggest not using ionic grid system in this case or using it like this:

        <IonGrid style={{
              height: '100%',
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
            }}>
          <IonRow>
            <IonCol>
              <OptionsButtons />
              <Delimiter />
            </IonCol>
            </IonRow>
            <IonRow>
            <IonCol>
              <OptionsButtons />
              <Delimiter />
            </IonCol>
            </IonRow>
            <IonRow>
            <IonCol>
              <OptionsButtons />
              <Delimiter />
            </IonCol>
          </IonRow>
      </IonGrid>

I tried this based on your suggestion: https://stackblitz.com/edit/ionic-react-demo-xuaw8o?file=App.jsx. The original position was properly conserved now, but when decreasing the height of the viewport I cannot access some of the content as you can see here: https://i.ibb.co/wKKk0Pf/image.png. Could you please try? You can also post your forked StackBlitz. Thanks! — davidesp, Nov 08 '22 at 13:14
@davidesp seems like you are encountering [this](https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container) problem. you can try their fixes, but I generally wouldn't use ionGrid and flex together. here is how I'd suggest a temporary fix: https://stackblitz.com/edit/ionic-react-demo-nvknbj?file=App.jsx — AmirAli Saghaei, Nov 08 '22 at 14:05

Ionic Elements lost their original position when the page decreases its size

1 Answers1