Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Edit pages’ sticky footer hides critical parts of the UI
See original GitHub issueIssue Summary
You can’t add new streamfield blocks at the bottom of a edit page on mobile, and this hides various parts of the UI at other screen sizes.
Steps to Reproduce
- On a IOS device open a browser and go to an edit page in the admin.
- Make sure the last field on that page is a streamfield. Containing a block.
- Try to add a block below. You can’t. The
+button is behind the save buttons.
I expect the save buttons to go below the form/content. I also wonder why the save buttons are always visible. They take up a lot op space. Up to 1/4 of the screen on smaller devices.
In this example the ‘Add another’ button - for a list stream field item - is also below the save buttons.
Technical details
- Wagtail version: 2.1
- Browser version: IOS Safari 11.4
Issue Analytics
- State:
- Created 5 years ago
- Comments:9 (8 by maintainers)
Top Results From Across the Web
Sticky Footer, Five Ways | CSS-Tricks
The purpose of a sticky footer is that it “sticks” to the bottom of the browser window. But not always, if there is...
Read more >Sticky footer hiding content - Stack Overflow
I made the following sticky footer using CSS. The bottom page content is currently hidden behind the footer (see the attached screenshot).
Read more >Sticky footers - CSS: Cascading Style Sheets - MDN Web Docs
A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the...
Read more >How to stick footer to bottom of page if not enough content
Quick answer: Add “display:flex; flex-direction:column; min-height:100vh;” to body or appropriate layout body element, then add “flex:1;” to ...
Read more >Footer sticks to bottom but covers content - HTML & CSS
Hi all, For a design I'm making, I found [this css code to make the footer stick to the bottom of the page...
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 Free
Top 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
As you say this has nothing to do with StreamField and everything to do with the buttons overlapping with a quarter of the screen. I think option 1 is by far superior — any overlap is always annoying when you have so little screen space to start with.
With #5946 merged this is now fixed, and will be released in Wagtail 2.10 🙂 thank you to everyone involved!
There may be further UX improvements to do here, so there isn’t as much scrolling to save a page on mobile. Please open another issue to discuss this.