Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-72695

#page-wrapper doesn't wrap full page as height set to 100% (which means exactly one screen worth)

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Deferred
    • Icon: Minor Minor
    • None
    • 3.9.11, 4.0
    • HTML and CSS, Themes
    • None
    • MOODLE_39_STABLE, MOODLE_400_STABLE

      I think this might have been done as a workaround for IE11 or old Safari mobile, but has occaisional odd impacts so might be worth looking into fixing.

      Currently if you visit a page that is longer than one screen, and highlight the html or body, you'll see that they are both set to the height of the screen. As you scroll down, they disappear and the rest of the content sits outside of them.

      The code that does this lives in theme/boost/scss/moodle/sticky-footer.scss and the intention is to make the footer remain stuck to the bottom of the page, when the content is less than one page worth.

      If browsers all worked properly then rather than set html, body and #page-wrapper all to height 100%, then we'd just need min-height 100vh on the #page-wrapper and everything else would expand as necessary.

      I believe for a while mobile Safari didn't cope well with vh, and I'm not sure if that's totally fixed or not and still needs worked around.

      The reason I noticed this is that position: sticky is now a valid way to create navbars if you don't care about IE11 (and there's JS polyfills for that case too). But if you set the navbar to be sticky it works until it hits the bottom of the containing element (#page-wrapper) and then scrolls off screen unexpectedly.

      I need to use position sticky for a particular clients needs, so I'll report back if anything odd happens when you override this CSS.

            Unassigned Unassigned
            bawjaws David Scotson
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.