mkdocs-material: Mkdocs tabs are not working for some individuals.

Contribution guidelines

• I’ve read the contribution guidelines and wholeheartedly agree

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

content tabs are not working when the site is published. It is just showing them as a list

Expected behaviour

Content tabs should show them as tabs.

Actual behaviour

content tabs are showing them as a list for some individuals, it is showing as tabs for some others.

Steps to reproduce

Not sure how to reproduce.

Package versions

• Python: 3.8.2
• MkDocs: version 1.1.2 from /Users/****/Library/Python/3.8/lib/python/site-packages/mkdocs (Python 3.8)
• Material: pip show mkdocs-material | grep -E ^Version

mkdocs_material_extensions-1.0.1.dist-info/ mkdocs_material_extensions-1.0.1.dist-info/

Configuration

site_name:  ******
site_url: https://****.**.****.com/
site_description: Technical Documentation.
site_author: ****
repo_url: https://bitbucket.com/scm/***/***.git



theme:
  name: material
  palette:
    scheme: preference
    primary: teal
    accent: indigo
  favicon: /images/logo7.png
  logo: '/images/logo.png'
  hljs_languages:
    - yaml
    - django
extra_css:
  - '/stylesheets/re.css'
# optionally add script to expand first level of navigation
extra_javascript:
  - '/javascript/nav-expand.js'


markdown_extensions:
  - codehilite:
      linenums: true
  - admonition
  - pymdownx.superfences
  - pymdownx.tilde
  - pymdownx.tabbed
  - pymdownx.details
  - pymdownx.snippets
  - pymdownx.inlinehilite
  - pymdownx.emoji:
      emoji_index: !!python/name:materialx.emoji.twemoji
      emoji_generator: !!python/name:materialx.emoji.to_svg
  - attr_list
  - def_list
  - footnotes
  - toc:
      permalink: true
      title: "<big>📌  Table of Contents</big>"



nav-expand.js:


document.addEventListener("DOMContentLoaded", function() {
    load_navpane();
});

function load_navpane() {
    var width = window.innerWidth;
    if (width <= 800) {
        return;
    }

    var maxlevel = 1
    var nav = document.getElementsByClassName("md-nav");
    for(var i = 0; i < nav.length; i++) {
        if (typeof nav.item(i).style === "undefined") {
            continue;
        }
        var level = nav.item(i).getAttribute("data-md-level")

        if (level && level <= maxlevel && nav.item(i).getAttribute("data-md-component")) {
            nav.item(i).style.display = 'block';
            nav.item(i).style.overflow = 'visible';
        }
    }

    var nav = document.getElementsByClassName("md-nav__toggle");
    for(var i = 0; i < nav.length; i++) {
        var level = 0
        var pnav = nav.item(i).closest('nav.md-nav')
        if (pnav) {
            level = pnav.getAttribute("data-md-level") || 0
        }
        if (level && level < maxlevel) {
            nav.item(i).checked = true;
        }
    }
}

re.css:

.md-typeset code {
    word-break: normal;
}


.md-grid {
    max-width: 81rem;
}


.tabbed-set {
    display: flex;
    position: relative;
    flex-wrap: wrap;
}

.tabbed-set .highlight {
    background: #ddd;
}

.tabbed-set .tabbed-content {
    display: none;
    order: 99;
    width: 100%;
}

.tabbed-set label {
    width: auto;
    margin: 0 0.5em;
    padding: 0.25em;
    font-size: 120%;
    cursor: pointer;
}

.tabbed-set input {
    position: absolute;
    opacity: 0;
}

.tabbed-set input:nth-child(n+1) {
    color: #333333;
}

.tabbed-set input:nth-child(n+1):checked + label {
    color: #FF5252;
}

.tabbed-set input:nth-child(n+1):checked + label + .tabbed-content {
    display: block;
}

/* Fix scrollbar in admonitions when containing a table */
.md-typeset .admonition .md-typeset__scrollwrap {
    margin-right: 0;
}


/* Code highlighting */

.md-typeset code, .md-typeset pre {
    color: var(--ibexa-dusk-black);
}

.md-typeset .codehilite code, .md-typeset .codehilite pre {
    background-color: #fff;
    padding: 0;
}

.md-typeset .codehilite code, .md-typeset .codehilite pre code {
    padding: 1.05rem 1.2rem;
}

.md-typeset .codehilitetable {
    border: 1px solid var(--codeblock);
}

### System information

- Operating system: MAC-OS
- Browser: Chrome