IonTabs pushes ion-footer outside the viewport

[andrewbwogi]

When I use IonTabs in a +layout.svelte

<ion-app>
  <IonTabs
    slot="top"
    tabs={myTabs}
    ionTabsWillChange={logStuff}
    ionTabsDidChange={logStuff}
  >
    <slot />
  </IonTabs>
</ion-app>

and ion-content with ion-footer in a +page.svelte that uses the layout

<ion-content>
  <h1>Heading</h1>
</ion-content>
<ion-footer>
  <ion-toolbar>
    <ion-title> Footer </ion-title>
  </ion-toolbar>
</ion-footer>

the result is that the footer is pushed beneath the viewport. I expect the footer to always stay visible at the bottom regardless of content or window size. I'm using ionic-svelte 0.5.81 and ionic/core 7.0.3.

[Tommertom]

Hi - thanks for reporting - I think this requires a full rework on the ionic-svelte library. It is not properly doing things related to delegate screens or however it is called. This problematic behaviour also happens with modals and footer etc... I currently too busy with other projects to really take full interest and understanding to get this fixed. Sorry for that.

[Tommertom]

Use https://discord.com/channels/520266681499779082/1049388501629681675/1103055213377618012 to investigate (note to myself)

[Tommertom]

Sean Perkins on Discord

I would suspect that is the issue impacting the styling/appearance. ion-page makes the host element position: absolute and sizes it to fill the container space.

I'm not too familiar to the svelte package, but I'd suspect it is somewhere in this implementation: https://github.com/Tommertom/svelte-ionic-app/blob/main/src/IonNav.svelte#L13-L37

Here is a reference from what we do in React: https://github.com/ionic-team/ionic-framework/blob/main/packages/react/src/components/navigation/IonNav.tsx

In the svelte implementation it would probably be wise to assign a "framework delegate" to the delegate property of IonNav. Then the package can leverage the attachViewToDom and removeViewFromDom API we expose: https://github.com/ionic-team/ionic-framework/blob/main/packages/react/src/framework-delegate.tsx#L14-L22. Ionic passes through the cssClasses that needs to be assigned to the host container. This is fairly similar to what the createHTMLCompFromSvelte function is doing, but that is only happening on the root component, not all subsequent pushed pages.

[Tommertom]

@andrewbwogi

this is the solution:

Each page needs to have class ion-page assigned to it

<div class="ion-page">
	<ion-content class="ion-padding">
		<h1>Apples</h1>
	</ion-content>
	<ion-footer>
		<ion-toolbar>
			<ion-title> Footer </ion-title>
		</ion-toolbar>
	</ion-footer>
</div>