Trying to understand <wa-page> and how to have "footer" as sticky at bottom #170
-
|
I am experimenting with the E.g. I now have this very basic code here: This will give this UI:
.. and if I then scroll down a little, then I see the blue footer:
Personally I cannot use the current footer to anything, as I need a sticky footer, which means that the only thing I will scroll is the Any hints on this would be very much appreciated. @WebAwesome - if you could supply some basic templates and examples for |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 6 replies
-
|
@KonnorRogers IIRC this was by design. Can you confirm? Should we consider an option to make the footer persist? |
Beta Was this translation helpful? Give feedback.
-
|
The (sticky) footer is where I always have a link for my version/changelog, documentation and contact details available, and having that only visible as the last thing after a potential very long scroll, is not an option for me at least. Having an option would be ideal, but I of course have no idea on the technical implications here 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
footers requiring scroll was by design because of a "dead zone" in the menu / aside areas that would happen if main content had overflow. technically sticky footers would remove that limitation, but I found very few sites used a sticky footer, and felt the API would be clunky. I think a sticky footer may be possible, but gotta mess around with it a little bit. |
Beta Was this translation helpful? Give feedback.
-
|
Here are 2 possible ways to add a sticky footer: |
Beta Was this translation helpful? Give feedback.
-
|
I think this works very well for me - at least the brief stuff I have tested, thanks. I have now this code here, https://jsfiddle.net/zov8bheg/ Noticed a couple of things though: Potential bug with z-index for elements in banner? Should the hamburger menu be shown, when no menu defined? |
Beta Was this translation helpful? Give feedback.
-
|
Z-index issue: I think this is a mistake in the component design. I made banner, header, and subheader all have the same z-index, but perhaps they should go in descending order from banner being the largest to subheader being the smallest. To fix your example: wa-page::part(banner) {
z-index: 6;
}
wa-page::part(header) {
z-index: 5;
}ideally, this becomes not necessary with the Popover API as our components start to migrate towards it and "top layer" solving this problem. as for the navigation button, you can disable it by setting the part to display: none; wa-page::part(navigation-toggle) {
display: none;
} |
Beta Was this translation helpful? Give feedback.
-
|
Again, this works very well, so thank you very much for your help here. I look forward to the "Popover API", whatever that is, so I do not need to do special stuff for the Z-index. Also, I hope there could be a general "fix" for not showing the "hamburger", when no menu defined. This is all about "this is the most logical" and by then the easiest for the users, so we do not need to handle this ourself 😁 |
Beta Was this translation helpful? Give feedback.
Here are 2 possible ways to add a sticky footer:
https://codepen.io/paramagicdev/pen/RNbmrKV?editors=1000
https://codepen.io/paramagicdev/pen/qEWwMVq