Problem/Motivation
When there are not enough content, the footer will rise to the top.
Steps to reproduce
Open any page, and make it with a little content [one paragraph as an example], and then look to the footer, it will rise to the top.
Proposed resolution
Have the following changes on both vartheme_bs5 and VARTHMEM_BS5_SUBTHEME template.
- Change
min-height: 100vhfor the page - Change template
page.html.twigto change footer margin top class frommt-5tomt-auto - Add
mb-5on last div before thefooter-wrapperin the page to add spacing before footer
{# Main #}
{% block main %}
<div role="main" class="main-container {{ container }} js-quickedit-main-content mb-5">
.....
.....
.....
</div>
{% endblock %}
{% if page.footer %}
{% block footer %}
<footer class="site-footer text-center text-lg-start bg-light mt-auto" role="contentinfo">
<div class="{{ container }}">
{{ page.footer }}
</div>
</footer>
{% endblock %}
{% endif %}
Remaining tasks
- ✅ File an issue about this project
- ✅ Addition/Change/Update/Fix to this project
- ✅ Testing to ensure no regression
- ➖ Automated unit/functional testing coverage
- ➖ Developer Documentation support on feature change/addition
- ➖ User Guide Documentation support on feature change/addition
- ✅ Accessibility and Readability
- ✅ Code review from 1 Varbase core team member
- ✅ Full testing and approval
- ✅ Credit contributors
- ✅ Review with the product owner
- ✅ Update Release Notes and Update Helper on new feature change/addition
- ✅ Release varbase-10.0.0-alpha1, vartheme_bs5-1.0.0-rc2
Varbase update type
- ✅ No Update
- ➖ Optional Update
- ➖ Forced Update
- ➖ Forced Update if Unchanged
User interface changes
Before:

After [With less content]:

After [With large content]:

API changes
- N/A
Data model changes
- N/A
Release notes snippet
- Issue #3280117 by Abdullah Yassin, Alaa Jwiehan: Fixed footer position bottom when page have a little content in Vartheme BS5
| Comment | File | Size | Author |
|---|---|---|---|
| #14 | 10-before.png | 54.97 KB | alaa jwiehan |
| #13 | full-10.png | 372.75 KB | alaa jwiehan |
| #12 | moderate-10.png | 132.56 KB | alaa jwiehan |
| #8 | Screenshot 2022-05-15 at 18-49-33 dev varbase10x1footer.png | 326.81 KB | rajab natshah |
| #7 | Screenshot 2022-05-15 at 18-16-31 dev varbase90x1vlb1.png | 80.05 KB | rajab natshah |
Issue fork vartheme_bs5-3280117
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
Abdullah Yassin commentedComment #4
Abdullah Yassin commentedComment #5
rajab natshahComment #7
rajab natshah❌ Testing to ensure no regression
Regression issue

I have noticed the following
Needs to have a bit of spacing between the footer and the last section or element in the page.
Comment #8
rajab natshahComment #10
Abdullah Yassin commentedComment #12
alaa jwiehan commentedComment #13
alaa jwiehan commentedComment #14
alaa jwiehan commentedComment #15
alaa jwiehan commentedComment #16
rajab natshahComment #17
rajab natshahComment #18
rajab natshahComment #19
rajab natshahComment #20
rajab natshahComment #22
rajab natshah✅ Released varbase-10.0.0-alpha1