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: 100vh for the page
  • Change template page.html.twig to change footer margin top class from mt-5 to mt-auto
  • Add mb-5 on last div before the footer-wrapper in 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

Command icon 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

Abdullah Yassin created an issue. See original summary.

Abdullah Yassin’s picture

Abdullah Yassin’s picture

Status: Active » Needs review
rajab natshah’s picture

Title: Fix footer position bottom when page have a little content » Fix footer position bottom when page have a little content in Vartheme BS5

  • Abdullah Yassin committed 2cc4626 on 1.0.x
    Issue #3280117: Fix footer position bottom when page have a little...
rajab natshah’s picture

Status: Needs review » Needs work
StatusFileSize
new80.05 KB

❌ Testing to ensure no regression

Regression issue
I have noticed the following
Footer with last section or element in the page

Needs to have a bit of spacing between the footer and the last section or element in the page.

rajab natshah’s picture

Abdullah Yassin’s picture

Status: Needs work » Needs review

alaa jwiehan’s picture

Issue summary: View changes
StatusFileSize
new132.56 KB
alaa jwiehan’s picture

Issue summary: View changes
StatusFileSize
new372.75 KB
alaa jwiehan’s picture

Issue summary: View changes
StatusFileSize
new54.97 KB
alaa jwiehan’s picture

Status: Needs review » Fixed
rajab natshah’s picture

rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes
rajab natshah’s picture

Issue summary: View changes

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

rajab natshah’s picture

Issue summary: View changes