Is is possible to use IonFab to show a form submit button?

Ionic Framework Ionic React
1

I’m trying to find a way to use Ion-Fab to make a floating “Save my account settings” button. (I am using IonFab because I only want the button to appear if a user makes a change.)

I have an <IonPage> that shows the user account settings.

These settings are contained within a <form> tag, and I use react-hook-form to build the form.

Here’s my problem: to get the FAB to be fixed in place, it has to be a direct child of <IonContent>. But to put the submit button in <IonFab>, <IonFab> has to be a child of the <form> tag.

Problem with the code below: the fab is not fixed in place (it needs to be a child of <IonContent>):

      <IonContent>
        <form onSubmit={handleSubmit(onSubmit)}>
          <FormItemUserTheme control={control} />
          <FormItemUserVibration control={control} />

          {!isEmptyObject(dirtyFields) && (
            <IonFab vertical="top" horizontal="end" slot="fixed" edge>
              <IonButton type="submit">
                Save Settings
              </IonButton>
            </IonFab>
          )}
        </form>
    </IonContent>

Problem with the code below: the fab is fixed in place properly, but form submit is not triggered:

      <IonContent>
        <form onSubmit={handleSubmit(onSubmit)}>
          <FormItemUserTheme control={control} />
          <FormItemUserVibration control={control} />
        </form>
        {!isEmptyObject(dirtyFields) && (
          <IonFab vertical="top" horizontal="end" slot="fixed" edge>
            <IonButton type="submit">
              Save Settings
            </IonButton>
          </IonFab>
        )}
    </IonContent>

Is there some way to use IonFab to show a form submit button?

2

Try positioning the ion-fab using CSS… Put the FAB inside the form and set it’s position to absolute.

3

Thanks!

absolute made it disappear, but this is working:

<IonFab className="fab-overlay">

.fab-overlay {
  position: fixed;
  top: 40px;
}
4

I was actually going to say fixed, don’t know why I said absolute. But at least helped you find the answer :smiley: