I’m using a position fixed bottom and slot=“fixed” on an ion-toolbar inside the ion-content so my form can make use of type=“submit” buttons natively on browser desktop use.
Versions:
@ionic/angular 6.1.8
@capacitor/core 3.5.1
@capacitor/android 3.5.1
Structure of Snippet:
<ion-header></ion-header>
<ion-content>
<form>
.....
<ion-toolbar slot="fixed" class="toolbar-bottom"><ion-title>Test</ion-title></ion-toolbar>
</form>
</ion-content>
.toolbar-bottom {
height: 56px;
position: fixed;
width: 100%;
z-index: 101;
bottom: 0;
--padding-bottom: var(--ion-safe-area-bottom, 0);
}
However I’m running into an issue with scroll assist on native devices, where the toolbar is overlapping the input selected, this only happens if its at a certain position on the screen, in which there is content below it but the input is near the bottom of the screen. So I think its due to not accounting for the custom toolbar, since the scroll assist function only accounts for IonFooterElement.
If I change it to an ion-footer outside the ion-content it works as expected, is there any way to modify/alter the scroll assist to account for the extra height from the fixed position content?
I though --offset-bottom or --offset-top might work, but so far no avail, and using the Capacitor Keyboard plugin looks promising but I’m not sure how to use it solve this, also seems like it would be a huge performance hit for something we could define via a static variable or css property. Wrapping the ion-toolbar with ion-footer inside the content also didn’t change the behavior.
If anyone has run into this or has any ideas please let me know, otherwise I guess the solution is to use ion-footer outside of ion-content and have a enter key listener that calls the form submit function instead.