Sidebar which extends beyond the footer causes the footer to float

davehobbs commented 3 years ago

[x] I've read the contribution guidelines and agree with them

I've found a bug and checked that ...

[x] ... the problem doesn't occur with the default MkDocs template
[x] ... the problem is not in any of my customizations (CSS, JS, template)
[x] ... the documentation does not mention anything about my problem
[x] ... there are no open or closed issues that are related to my problem

Description

When a sidebar expands past the bottom of a page the footer scrolls with the page content.

Expected behavior

The footer should stay fixed to the bottom of the page.

Actual behavior

The footer scrolls with the page content. For example:

Steps to reproduce the bug

I think this is a fairly simple build:

pip-compile --output-file requirements.txt requirements.in where requirements.in only has mkdocs mkdocs-material
mkdocs -v build which runs with no errors
Open up a page.
Expand the sidebar until it reaches beyond the bottom of the page
Scroll up and down

Package versions

Python: 3.6.9
MkDocs: 1,1,2
Material: 7.1.3

Project configuration

site_url: https://www.eclipse.org/openj9/docs  # the canonical URL of the site. This will add a link tag with the canonical URL to the generated HTML header.
repo_name: eclipse/openj9
repo_url : https://github.com/eclipse/openj9  # A link to your GitHub or Bitbucket repository on each page.
edit_uri: ""
use_directory_urls: false

site_description: Eclipse OpenJ9 documentation

theme:
  name: material
  palette:
    primary: teal          # deep orange
    accent:  cyan          # orange
  font:
    text: Roboto           # 'Segoe Print' 'Kristen ITC' 'Tempus Sans ITC'
    code: Roboto Mono      # 'Consolas'
  logo: cr/openj9_6b.png
  icon:
    repo: fontawesome/brands/github
  favicon: cr/openj9-logo.svg

docs_dir: 'docs'

site_dir: 'site'

extra:
  version: 2.0
  social:
    - icon: fontawesome/brands/github
      link: https://github.com/eclipse/openj9
      name: OpenJ9 in GitHub
    - icon: fontawesome/brands/slack
      link: https://openj9.slack.com
      name: OpenJ9 on Slack
    - icon: fontawesome/brands/twitter
      link: https://twitter.com/openj9
      name: OpenJ9 on Twitter
    - icon: fontawesome/brands/stack-overflow
      link: https://stackoverflow.com/search?q=OpenJ9
      name: OpenJ9 on StackOverflow

# Preview controls

dev_addr: '127.0.0.1:8008'

# Formatting options

markdown_extensions:
  - def_list
  - toc
  - sane_lists
  - attr_list
  - pymdownx.emoji:   # enable icons in markdown
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg

nav:

    - "About the docs"                                                           : index.md
    - "OpenJ9 builds"                                                            : builds.md
    - "Getting started"                                                          : introduction.md
    - "New to OpenJ9?"                                                           : openj9_newuser.md

The nav includes approximately 300 more entries after this.

System information

OS: macOS 10.15.7
Browser: Chrome Version 89.0.4389.114 (Official Build) (x86_64)

davehobbs commented 3 years ago

In addition it may be useful to know that this is a local build and there are some js errors in the browser console:

index.ts:46 Fetch API cannot load file:///Users/davehobbs/docker/temp/search/search_index.json. URL scheme must be "http" or "https" for CORS request.
It @ index.ts:46
index.ts:100 Uncaught DOMException: Failed to construct 'Worker': Script at 'file:///Users/davehobbs/docker/temp/assets/javascripts/workers/search.fe42c31b.min.js' cannot be accessed from origin 'null'.
    at ui (file:///Users/davehobbs/docker/temp/assets/javascripts/bundle.4ea5477f.min.js:3:46290)
    at mi (file:///Users/davehobbs/docker/temp/assets/javascripts/bundle.4ea5477f.min.js:3:47716)
    at file:///Users/davehobbs/docker/temp/assets/javascripts/bundle.4ea5477f.min.js:3:54300
    at Array.map (<anonymous>)
    at file:///Users/davehobbs/docker/temp/assets/javascripts/bundle.4ea5477f.min.js:3:54293
    at file:///Users/davehobbs/docker/temp/assets/javascripts/bundle.4ea5477f.min.js:3:55080
index.ts:46 Uncaught (in promise) TypeError: Failed to fetch
    at It (index.ts:46)
    at ye (index.ts:65)
    at bundle.ts:100
    at bundle.ts:246

If I remove the search plugin i.e plugins: [] then the problem seems to go away.

squidfunk commented 3 years ago

Thanks for reporting. Search doesn’t work from file:// without some extra work (see the docs on offline search), which is why you’re seeing this behavior. You have two options:

disable search
use the localsearch plugin

ryparker commented 2 years ago

Just ran into this issue when trying to solve the same issue. However for me the fix was adding alternate_style: true param to pymdownx.tabbed. This extra config is documented as a requirement when using the extension in Material's theme.

# mkdocs.yml

markdown_extensions:
  - pymdownx.tabbed:
      alternate_style: true

smartYSC commented 7 months ago

I am seeing this issue with again with these versions:

mkdocs==1.5.3
mkdocs-material==9.5.13
mkdocs-material-extensions==1.3.1

I am using the offline and the privacy plugins to generate an offline documentation. With a long left sidebar the footer starts floating when scrolling as initially reported. With a non-offline build everything is fine.

The suggested fix by @ryparker does not work (I was not ussing pymdownx.tabbed anyway).

smartYSC commented 7 months ago

Disabling navigation.instant feature fixes the problem.

squidfunk commented 7 months ago

As our docs say, instant navigation does not work offline.

smartYSC commented 7 months ago

Oh, i missed that! Maybe a colorful admonition would help here 🙃

squidfunk / mkdocs-material