-
|
I am using the AppShell in my layout and made a header and footer. Now when I am making content between them, the footer seems to display as if it is fixed and does not render below the entirety of the content. There is a scrollbar for only the test content when I would want the scrollbar to extend the entirety of the page. I followed all instructions and added the required classes to the body and global postcss. Screenshots are from an app created with
Ideally the test content would take up the rest of the screen and the footer wouldn't be seen initially. The footer should only be seen when the end of the test content is reached after scrolling through the test content. (Excuse the terrible colors, this was only for highlighting the layout problem I'm having) |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 4 replies
-
|
I figured out this is possible by breaking my Footer component out of the footer slot in the Appshell. Not ideal but it works as expected now. |
Beta Was this translation helpful? Give feedback.
-
|
We sadly have 0 information to help you right now. |
Beta Was this translation helpful? Give feedback.
-
|
Sure thing.
<script lang='ts'>
// The ordering of these imports is critical to your app working properly
import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
import '@skeletonlabs/skeleton/styles/all.css';
// Most of your app wide CSS should be put in this file
import '../app.postcss';
import { AppShell } from '@skeletonlabs/skeleton';
</script>
<AppShell>
<svelte:fragment slot="header">Header</svelte:fragment>
<slot></slot>
<svelte:fragment slot="footer">
<div class="h-36">
Footer
</div>
</svelte:fragment>
</AppShell>
<div class="h-screen flex flex-col justify-between bg-red-600">
<div>
Beginning of Test content
</div>
<div>
End of Test content
</div>
</div>
/*place global styles here */
html,
body {
@apply h-full overflow-hidden;
}
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body>
<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
Finally figured out what I was doing wrong. I was using the Header and Footer slots instead of PageHeader and PageFooter slots. The difference between the two wasn't clear until I messed around with it. After switching, everything works as expected now. |
Beta Was this translation helpful? Give feedback.
-
|
Sorry, I didn't see the first answer. Nice that that worked! Any suggestions on how to make the distinction more clear? |
Beta Was this translation helpful? Give feedback.
-
|
I would just put a note in the documentation about the positioning of each. It seems as if Header and Footer use fixed positioning while PageHeader and PageFooter use relative positioning (I don't know exactly how they are positioned by default in the Appshell component because they seem like they are grouped outside of the page) It helps with understanding when to use either. The Header and Footer slots don't scroll with the page while the PageHeader and PageFooter slots do scroll with the page. |
Beta Was this translation helpful? Give feedback.
-
|
This message already exists on the documentation, along with a visualization.
|
Beta Was this translation helpful? Give feedback.
-
|
I must've misunderstood it but it makes sense more sense on a second look. Thank you! |
Beta Was this translation helpful? Give feedback.
Finally figured out what I was doing wrong. I was using the Header and Footer slots instead of PageHeader and PageFooter slots. The difference between the two wasn't clear until I messed around with it. After switching, everything works as expected now.