[#35003] - Cassiopeia content vertical alignment is center
- Closed
- 31 Jul 2021
- Urgent
- Build: 4.0
- # 35003
Steps to reproduce the issue
Make a clean install and disable all modules. The content will be aliened vertically in the middle of the screen.
Expected result
The content should be aligned at the top. Also the header has more padding then necessary.
Actual result
See screenshot.
System information (as much as possible)
Additional comments
Due to the PR #34849 the body now has a height of 100%. That way the grid rows get stretched. If the actual content height is nog filling the 100% height, the content gets centered vertically and other positions get some extra padding.
@drmenzelit please review your PR.
joomla-cms-bot
- 
I can confirm... I solved the problem of the footer not staying at the bottom and created a new problem... that is really great...
I could need some help on this, the grid is driving me crazy... @dgrammatiko @hans2103 ... someone else with css super power?
@drmenzelit
Option 1 would be to remove the 100vh on the body, add a div with class spacer above the footer. Set the grid-template-rows of the body to auto for all the rows, except for the spacer this one should be 1fr. This pushes the footer down. This is not the cleanest option but works.
Option 2 is a bit (maybe a lot) more work. place a div around the content and module positions. That way you get 3 divs (header / middle / footer). Then you can use flexbox or grid to push the footer down. The content in the middle div then can be aligned to top.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/35003.
@RickR2H it seems we had similar thoughts at the same time. Please check PR #35004
Your option 2 is probably the better way, that is the holy grail layout (https://www.digitalocean.com/community/tutorials/css-css-grid-holy-grail-layout), but Cassiopeia's grid-areas are very complex with other positions like banner, top-a, botton-a, etc.
Closing as we have a PR.
Please feel free to re-open if not solved or to create a different PR.
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-07-31 15:48:56 |
| Closed_By | ⇒ | drmenzelit |
I confirm this issue.
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/35003.