Tabs rendering as buttons

[Ulthran]

Describe the bug

context Using the first example from the docs:

.. tabs::

   .. tab:: Apples

      Apples are green, or sometimes red.

   .. tab:: Pears

      Pears are green.

   .. tab:: Oranges

      Oranges are orange.

expectation I expect it to look normal.

bug It renders the tabs as buttons.

problem Looks bad and if you click the active 'tab' it will close entirely (i.e. not display anything but the 'tabs').

^ same example after clicking on "Apples"

Reproduce the bug

This is happening on this project at this commit https://github.com/sunbeam-labs/sunbeam/pull/378/commits/4696e22bb3931c76ec2b16405ef8600aa4f1f4ff on the quickstart page of the docs

https://sunbeam--378.org.readthedocs.build/en/378/quickstart.html

List your environment

conf.py

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
#
# Sunbeam documentation build configuration file, created by
# sphinx-quickstart on Thu Jan 18 16:59:48 2018.
#
# This file is execfile()d with the current directory set to its
# containing dir.
#
# Note that not all possible configuration values are present in this
# autogenerated file.
#
# All configuration values have a default; values that are commented out
# serve to show the default.

# If extensions (or modules to document with autodoc) are in another directory,
# add these directories to sys.path here. If the directory is relative to the
# documentation root, use os.path.abspath to make it absolute, like shown here.
#
import os
import sys
sys.path.insert(0, os.path.abspath('.'))

# -- General configuration ------------------------------------------------

# If your documentation needs a minimal Sphinx version, state it here.
#
# needs_sphinx = '1.0'

# Add any Sphinx extension module names here, as strings. They can be
# extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
# ones.
extensions = ['sphinx_tabs.tabs']

# Add any paths that contain templates here, relative to this directory.
templates_path = ['_templates']

# The suffix(es) of source filenames.
# You can specify multiple suffix as a list of string:
#
# source_suffix = ['.rst', '.md']
source_suffix = '.rst'

# The master toctree document.
master_doc = 'index'

# General information about the project.
project = 'Sunbeam'
copyright = '2019, Erik Clarke, Chunyu Zhao, Jesse Connell, Louis Taylor'
author = 'Erik Clarke, Chunyu Zhao, Jesse Connell, Louis Taylor'

import sunbeamlib

# The version info for the project you're documenting, acts as replacement for
# |version| and |release|, also used in various other places throughout the
# built documents.
#
# The short X.Y version.
version = sunbeamlib.__version__

if os.environ.get("READTHEDOCS") == "True":
    # Because Read The Docs modifies conf.py, versioneer gives a "dirty"
    # version like "5.10.0+0.g28674b1.dirty" that is cleaned here.
    version = version.partition("+0.g")[0]

# The full version, including alpha/beta/rc tags.
release = version

# The language for content autogenerated by Sphinx. Refer to documentation
# for a list of supported languages.
#
# This is also used if you do content translation via gettext catalogs.
# Usually you set "language" from the command line for these cases.
language = None

# List of patterns, relative to source directory, that match files and
# directories to ignore when looking for source files.
# This patterns also effect to html_static_path and html_extra_path
exclude_patterns = ['_build', 'Thumbs.db', '.DS_Store']

# The name of the Pygments (syntax highlighting) style to use.
pygments_style = 'sphinx'

# If true, `todo` and `todoList` produce output, else they produce nothing.
todo_include_todos = False

# -- Options for HTML output ----------------------------------------------

# The theme to use for HTML and HTML Help pages.  See the documentation for
# a list of builtin themes.
#
html_theme = 'sphinx_rtd_theme'

# Theme options are theme-specific and customize the look and feel of a theme
# further.  For a list of options available for each theme, see the
# documentation.
#
# html_theme_options = {}

# Add any paths that contain custom static files (such as style sheets) here,
# relative to this directory. They are copied after the builtin static files,
# so a file named "default.css" will overwrite the builtin "default.css".
html_static_path = ['_static']

html_context = {
    'css_files': [
        '_static/theme_overrides.css',  # override wide tables in RTD theme
        ],
     }

# Custom sidebar templates, must be a dictionary that maps document names
# to template names.
#
# This is required for the alabaster theme
# refs: http://alabaster.readthedocs.io/en/latest/installation.html#sidebars
html_sidebars = {
    '**': [
        'relations.html',  # needs 'show_related': True theme option to display
        'searchbox.html',
    ]
}

# -- Options for HTMLHelp output ------------------------------------------

# Output file base name for HTML help builder.
htmlhelp_basename = 'Sunbeamdoc'

# -- Options for LaTeX output ---------------------------------------------

latex_elements = {
    # The paper size ('letterpaper' or 'a4paper').
    #
    # 'papersize': 'letterpaper',

    # The font size ('10pt', '11pt' or '12pt').
    #
    # 'pointsize': '10pt',

    # Additional stuff for the LaTeX preamble.
    #
    # 'preamble': '',

    # Latex figure (float) alignment
    #
    # 'figure_align': 'htbp',
}

# Grouping the document tree into LaTeX files. List of tuples
# (source start file, target name, title,
#  author, documentclass [howto, manual, or own class]).
latex_documents = [
    (master_doc, 'Sunbeam.tex', 'Sunbeam Documentation',
     'Erik Clarke, Chunyu Zhao, Jesse Connell, Louis Taylor', 'manual'),
]

# -- Options for manual page output ---------------------------------------

# One entry per manual page. List of tuples
# (source start file, name, description, authors, manual section).
man_pages = [
    (master_doc, 'sunbeam', 'Sunbeam Documentation',
     [author], 1)
]

# -- Options for Texinfo output -------------------------------------------

# Grouping the document tree into Texinfo files. List of tuples
# (source start file, target name, title, author,
#  dir menu entry, description, category)
texinfo_documents = [
    (master_doc, 'Sunbeam', 'Sunbeam Documentation',
     author, 'Sunbeam', 'One line description of project.',
     'Miscellaneous'),
]

[welcome[bot]]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.
If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).
Welcome to the EBP community! :tada:

[foster999]

Hey, thanks for getting in touch! This is the default appearance for HTML buttons, so it seems like the package CSS isn't being included in your build for some reason. I don't know how RTD is doing the build, so I'd suggest trying a manual build locally to check if this still occurs - let me know if it does and I can try to reproduce it

Tabs intentionally close when you click the open tab. This can be configured (see the docs)

[Ulthran]

Thanks @foster999, I commented out these lines from conf.py:

#html_static_path = ['_static']

#html_context = {
#    'css_files': [
#        '_static/theme_overrides.css',  # override wide tables in RTD theme
#        ],
#     }

and added sphinx_tabs_disable_tab_closing = True and that seems to have fixed my problems.

[foster999]

Great, glad that worked out ☺️