question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Page is rendered as if TOC is disabled when no header is set (including h1)

See original GitHub issue

Contribution guidelines

I’ve found a bug and checked that …

  • … the problem doesn’t occur with the mkdocs or readthedocs themes
  • … the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
  • … the documentation does not mention anything about my problem
  • … there are no open or closed issues that are related to my problem

Description

When you create a page without any headers - including no H1 header - will Material for MkDocs automatically use the full width of the body, as if the TOC has been disabled, even if this isn’t the case.

Example without a header (auto-generated H1): image

Source:

---
title: FAQ
description: Collection of commonly asked questions about ItemsAdder
---

!!! info "Test admonition box"
    Test box to visually show the issue happening.
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Example with a H1 header: image

Source:

---
title: FAQ
description: Collection of commonly asked questions about ItemsAdder
---

# Some header

!!! info "Test admonition box"
    Test box to visually show the issue happening.
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Expected behaviour

Material for MkDocs should use the same width for all pages, unless I explicitly disable/hide the TOC and/or Nav.

Actual behaviour

Whenever a page without Headers is rendered will the full width be used, which results in inconsistent displays of pages (Some having fixed width without a TOC rendered while others don’t)

Steps to reproduce

  1. Create a page
  2. Fill it with any text but no headers
  3. Let mkdocs serve render the result
  4. Add header to page to compare

Package versions

  • Python: 3.7.6
  • MkDocs: 1.3.0
  • Material: 8.2.8

Configuration

site_name: ItemsAdder Wiki
copyright: Copyright &copy; <a href="https://devs.beer/" target="_blank">LoneDev</a>

site_url: https://andre601.ch/Wiki-ItemsAdder # TODO: Update URL once PR ready.

theme:
  favicon: assets/images/branding/logo_512x512.png
  custom_dir: overrides
  features:
    - navigation.tabs
    - navigation.tabs.sticky
    - navigation.indexes
    - content.code.annotate
  name: material
  logo: assets/images/branding/logo_512x512_no_gradient_transparent.png
  icon:
    repo: fontawesome/brands/github
  palette:
  - media: "(prefers-color-scheme: light)"
    scheme: default
    primary: purple
    toggle:
      icon: material/weather-night
      name: Switch to dark mode
  - media: "(prefers-color-scheme: dark)"
    scheme: slate
    primary: purple
    toggle:
      icon: material/weather-sunny
      name: Switch to light mode

repo_name: LoneDev6/Wiki-ItemsAdder
repo_url: https://github.com/LoneDev6/Wiki-ItemsAdder

watch:
- overrides
- .snippets

extra:
  social:
    - icon: fontawesome/brands/github
      link: https://github.com/LoneDev6/Wiki-ItemsAdder
    - icon: fontawesome/brands/discord
      link: https://discord.com/invite/sMAE3Na

extra_css:
  - 'assets/stylesheets/extra.css'

plugins:
  - search
  - awesome-pages
  - pagenav-generator
  - ezlinks
  - autolink_references:
      autolinks:
        - reference_prefix: MC-
          target_url: https://bugs.mojang.com/browse/MC-<num>
  #
  # TODO: Prepare wiki once plugin update is out
  #- i18n:
  #    default_language: en
  #    folder_per_language: true
  #    languages:
  #      en:
  #        name: English

markdown_extensions:
  - md_in_html
  - admonition
  - meta
  - attr_list
  - footnotes
  - pymdownx.details
  - pymdownx.superfences
  - pymdownx.highlight
  - pymdownx.keys
  - pymdownx.inlinehilite
  - pymdownx.magiclink
  - pymdownx.tasklist:
      custom_checkbox: true
  - toc:
      permalink: true
  - pymdownx.tabbed:
      alternate_style: true 
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
      options:
        custom_icons:
          - overrides/.icons
  - pymdownx.snippets:
      base_path:
        - .snippets

System information

  • Operating system: Windows 10
  • Browser: Microsoft Edge Beta 100.0.1185.27

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
squidfunkcommented, Apr 8, 2022

Released as part of 8.2.9

1reaction
Andre601commented, Apr 6, 2022

No worries. Visual issues aren’t that much of a problem and I’m always glad when I can report those to improve things in one way or another.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Table of Contents (2) - Unofficial Jupyter Notebook Extensions
There is a configurable option to skip h1 headers from the ToC, to allow their use as a notebook title. However, this cause...
Read more >
3.1 HTML document | R Markdown: The Definitive Guide
collapsed (defaults to TRUE ) controls whether the TOC appears with only the top-level (e.g., H2) headers. If collapsed initially, the TOC is...
Read more >
CSS Generated Content for Paged Media Module - W3C
CSS is a language for describing the rendering of structured ... h1 { string-set: header content(before) ':' content(text); } h1::after ...
Read more >
HTML Documents - R Markdown - Data Science with R
Floating TOC​​ Options include: collapsed (defaults to TRUE ) controls whether the table of contents appers with only the top-level (e.g. H2) headers....
Read more >
Automatic TOC in github-flavoured-markdown - Stack Overflow
This results in a nested set of unordered lists, using the headers in the document. Note: this should work for GitHub Pages, not...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found