Open andrewbwogi opened 1 year ago
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.
Use https://discord.com/channels/520266681499779082/1049388501629681675/1103055213377618012 to investigate (note to myself)
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.
@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>
When I use IonTabs in a +layout.svelte
and ion-content with ion-footer in a +page.svelte that uses the layout
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.