Ad

Element Is Position Outside Of Screen

- 1 answer

I am using Ionic 4 with a React set up.

ionic start myapp --type=react

I am trying to add a simple Fab button to the app positioning it to the bottom right corner of the screen:

<IonFab vertical="bottom" horizontal="end" slot="fixed">
  <IonFabButton onClick={()=>{props.history.push("/add")}}>
    <IonIcon icon={add} />
  </IonFabButton>
</IonFab>

However this results in the button being just slightly visible while the majority of it is out of the screen.

When i look at the elements & styles panel in the devTools i notice that the element is given the following rule:

:host(.fab-vertical-bottom) {
    bottom: 10px;
}

Which explains the view i'm getting of just a few pixels of the button. Is this a problem with Ionic 4 or am I doing something wrong here?


full component:

import { IonContent, IonHeader, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonButtons, IonBackButton } from '@ionic/react';
import React from 'react';
import { RouteComponentProps } from 'react-router';

/* Icons */
import {add} from 'ionicons/icons';

const AddItem: React.FunctionComponent<RouteComponentProps> = (props) => {
  return (
    <>
        <IonHeader>
          <IonToolbar>
            <IonButtons slot="start" >
              <IonBackButton defaultHref="/home"/>
            </IonButtons>
            <IonTitle>Add Item</IonTitle>
          </IonToolbar>
        </IonHeader>
      <IonContent className="ion-padding">
          <h1>blablablabla</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus soluta illum sit asperiores, debitis quia magnam non pariatur dignissimos necessitatibus labore ratione obcaecati nesciunt nam accusantium sequi! Doloribus, nulla ipsam.
          </p>
          <IonFab vertical="bottom" horizontal="end" slot="fixed">
            <IonFabButton onClick={()=>{props.history.push("/add")}}>
              <IonIcon icon={add} />
            </IonFabButton>
          </IonFab>
      </IonContent>
    </>
  );
};

export default AddItem;
Ad

Answer

Thanks for sharing your component and step to reproduce.

So this seems like a bug, the reason being that the fab displacement is caused by the IonHeader element. But there are some workarounds and an issue for this bug was closed a little while ago with a non-hacky solution. first, you could actually style the fab to be a fixed element

ion-fab {
  position: fixed;
}

Which I don't prefer, and generally is warned against, but in your use case it actually makes sense as your element IS separate from the regular flow of the DOM.

OR you could wrap your content in an IonPage element, which makes a little more sense as it pertains to the framework. It is a little strange because I don't see the IonPage element referenced in the docs like you do the other structure components like IonContent

return (
    <IonPage>
       <IonHeader>
          <IonToolbar>
            ...
          </IonToolbar>
        </IonHeader>
      <IonContent>
        ...
        <IonFab vertical="bottom" horizontal="center" slot="fixed">
          <IonFabButton>
            <IonIcon icon={add} />
          </IonFabButton>
        </IonFab>
      </IonContent>
    </IonPage>
  );
Ad
source: stackoverflow.com
Ad