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.

Is it possible to set full-width on tabbed sections?

See original GitHub issue

Describe the problem

Hi there! Imagine I’m trying to list installation instructions for package across operating systems. I’m using tabbed sections like so (sorry in advance, getting this to render in GitHub wasn’t easy):


    ````{tabbed} Ubuntu
    things for Ubuntu
    ````
    ````{tabbed} macOS
    things for macOS
    ````
    ````{tabbed} Windows
    things for windows
    ````

Some of the tab contents are code blocks, which would benefit from having more horizontal space. I’ve tried setting :class: full-width and :container: +full-width but couldn’t seem to enable the tabs to use up the full width of the page, like so:


    ````{tabbed} Ubuntu
    :class: full-width
    things for Ubuntu
    ````
    ````{tabbed} macOS
    :class: full-width
    things for macOS
    ````
    ````{tabbed} Windows
    :class: full-width
    things for windows
    ````

When I build the book, I see WARNING: Directive 'tabbed': Unknown option: class. Am I missing something? Is it not yet possible to set the tabbed section size to the full width of the page?

Link to your repository or website

No response

Steps to reproduce

  1. Create a tabbed section like so:

    ````{tabbed} Ubuntu
    things for Ubuntu
    ````
    ````{tabbed} macOS
    things for macOS
    ````
    ````{tabbed} Windows
    things for windows
    ````

  1. Attempt to set any/all tab widths to full-width and notice the warnings when building the book.

The version of Python you’re using

3.7.10

Your operating system

macOS

Versions of your packages

Jupyter Book: 0.10.2 MyST-NB: 0.12.3 Sphinx Book Theme: 0.1.0 MyST-Parser: 0.13.7 Jupyter-Cache: 0.4.3 NbClient: 0.5.3

Additional context

Please let me know if there’s any other context I can provide! No worries if this simply isn’t possible yet. Thank you again, this is a fantastic package.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
chrisjsewellcommented, Aug 3, 2021

Ah yeh not at the moment I’m afraid. I’m actually just finishing off https://sphinx-design.readthedocs.io/en/sbt-theme/tabs.html, which is intended to eventually replace sphinx-panels extension here in jupyter-book, and there I just checked and you can indeed add :class: full-width to the tab-set to achieve this.

(see https://github.com/executablebooks/sphinx-design#comparison-to-sphinx-panels for how it currently differs)

0reactions
dataframingcommented, Aug 4, 2021

Awesome — thanks Chris!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Responsive Full Width Tabs - Codrops
The main idea is to show only icons for the mobile view and allow the text to appear when there's enough space.
Read more >
Make <TabPanel> content full width and hight as parent
I am using appbar with tabs and I want to be able when I pick some of the tabs the content of the...
Read more >
Increasing Tab section display to full width in Rise
Is there a way to make the tab section full width display on the page. Its currently lees than say the width of...
Read more >
Create a full-width section - PageFly Manual
With PageFly, you can easily create a full-width section on your Shopify page.This article will show you how to do it in just...
Read more >
Fullwidth tabs - CSS-Tricks
1- Make the .tab elements all go the full width of the screen? Us can try manipulating the width property and set it...
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