Floating Footer for Page component problem
See original GitHub issueDescribe the bug
I just set up new Angular project and I tried to use Page WC and I am getting this behavior you can see on the picture. The floating bar slides from bottom up and stays in header. I just copied example from docs. Not sure if I am missing something ?
To reproduce Steps to reproduce the behavior:
- Go to https://github.com/KevinOkamoto/poc-checkout
- Clone repo
- Run
npm i
ng serve
ng serve ui5-checkout
If I hide footer this is what I get:
Do I need to import some additional styles ? As I see icons are missing too.
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
Easy sticky footer - stop a footer from floating up a short page!
Having the footer of the page just floating around in the middle just looks... bad. So let's see how we can fix it...
Read more >floating footer always on the bottom and visible - Stack Overflow
Basically this checks to see if the height of the document will fill the window, if it is less than the window, it...
Read more >A Clever Sticky Footer Technique - CSS-Tricks
The idea is that they stick to the bottom of the screen, even when the content of the page isn't enough to push...
Read more >Tech spotlight: Floating footer with React functional components
Senior front end engineer David Daudelin walks us through building a floating footer to solve a range of complex scenarios with forms of ......
Read more >How to create footer to stay at the bottom of a Web page?
How to position a div at the bottom of its container using CSS? Related Articles. 1. How to create fixed/sticky footer on the...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Just had a look into the example, the
height: 100%;
is missing for<html>
and<body>
. IMO, this should be documented for components like the<ui5-page>
that the component needs to have a dedicated height and when you want to fill the full page with the page component we should document how to do so with the height style.Another issue is the height calculation for the header / footer. @Web Components Team: as we allow 0…n
HTMLElement
s to be put into theheader
or thefooter
slot, the height calculation needs to work properly.To import the icons, the documentation is here: https://sap.github.io/ui5-webcomponents/playground/components/Icon/ - do we also have a central documentation for using icons?
thank you.