Tab with a lot if items and long captions

[sergun]

Hello,

is it possible:

1. To control captions widths? Text size can vary.. Now large captions are cutted. Caption tooltips can be also helpful.
2. To enable tab items horizontal scroll bar like for Excel sheets. It is usefull when there are a lot of items inside Tab control. ?

tab = widgets.Tab([widgets.HBox(), widgets.HBox(), widgets.HBox(), widgets.HBox(), widgets.HBox(), 
                   widgets.HBox(), widgets.HBox(), widgets.HBox(), widgets.HBox()])
tab.set_title(0, 'caption')
tab.set_title(1, 'large caption')
tab.set_title(2, 'very large caption with a lot of characters')
tab.set_title(3, 'caption')
tab.set_title(4, 'large caption')
tab.set_title(5, 'very large caption with a lot of characters')
tab.set_title(6, 'caption')
tab.set_title(7, 'large caption')
tab.set_title(8, 'very large caption with a lot of characters')

tab

Scrollbar in Excel:

Thanks! Sergey.

[jasongrout]

Great questions. Right now the tabs are fixed width: https://github.com/jupyter-widgets/ipywidgets/blob/67a088aa06e4f1200db034a1f39bd59217aa51a8/packages/controls/css/widgets-base.css#L28 and https://github.com/jupyter-widgets/ipywidgets/blob/67a088aa06e4f1200db034a1f39bd59217aa51a8/packages/controls/css/widgets-base.css#L936-L948

Perhaps we can introduce a style attribute for the tabs control, similar to the description_width control, that lets you adjust the width.

As for scrollbars for the tabs, did you know you can use your mousewheel to scroll the tabs? If that's not enough, I can see adding the next/previous buttons would be helpful. Another way to do it is like Firefox, adding < and > buttons to the left and right ends of the tab bar to scroll the tabs.

[jasongrout]

Labeling as "Future" - i.e., something that would be great to tackle in the future. Want to try doing it? We're happy to help you get started. My guess is that the tab width issue is the easiest.

[sergun]

Interested in participating caption width implementation. Please give my some starting guesses.

As for scrollbars for tabs the problem I mean is when you have a lof tab items width of top part of tab control (with captions) increases (width of current tab item doesn't change) and horizontal scrollbar of Jupyter output appears. You can see this in screenshots in my original comment. Of course this scrollbar can be used for scrolling and navigating to some tab item. But in my opinion it is better to be able to define single width property of Tab. It should define width of both parts: captions part and selected item part. If total sum of all captions widths is more than this value some Excel-like left and right buttons can appear to scroll captions.

[jasongrout]

Here is an example of adding a style attribute to a widget: https://github.com/jupyter-widgets/ipywidgets/pull/1834/files

[jasongrout]

(sorry, that may be a bit cryptic - I'll have time to work on a more user-friendly guide to adding style attributes next week...)

[sergun]

@jasongrout thanks! Will try to implement

[denshe]

Hi,

We use 'Tab' widget too and the default tab width seems to be rather small. Until style attributes for that implemented, what can be a temporary workaround? I.e., according to @jasongrout tab width is controlled by: --jp-widgets-horizontal-tab-width: 144px;

Given a notebook, can it be overwritten by running the following?

%%html
<style>
.....                <----  what should be here?
</style>

[jasongrout]

The really kludgy workaround in the classic notebook right now that is brittle and may likely break in some future upgrade is:

%%html
<style>
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab {
    flex: 0 1 300px
}
</style>

[rheiland]

Just curious if this thread somehow relates to the issue I just discovered - a vertical scrollbar not appearing in a tab when it seems like it should due to the amount of html text being displayed in the tab: https://github.com/rheiland/test_scroll (at least for my versions of Jupyter and Chrome (73.0.3683.86); am I correct that results can vary by browsers/versions?)

[saurabhheda]

I think this particular option is applicable to set the width of all the tabs? Can we adjust width of a particular tab and reduce the width of the other tab so that all the tabs are visible and fit on the screen? %%html

[Zwette]

I just have the same confusion. Can we change the width of the tab titles now?

[jasongrout]

I don't think there has been any progress. If you want to work on it, that would be great. See the above conversation, or post questions here.

[jonsnowseven]

Any news on this topic? Thank you in advance.

[tfmark]

Would it be a quick win to just set the width to auto in the css? It has a min-width of 35px already set.

I'm now using

%%html
<style>
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab {
    flex: 0 1 auto
}
</style>

as a workaround

[legion49f]

display(
    HTML(
        """
<style>
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab {
    flex: 0 1 auto
}
</style>
"""
    )
)

this also works in case you want to not take a whole cells for the cell magic. thanks to @tfmark

[ollyhensby]

display(
    HTML(
        """
<style>
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab {
    flex: 0 1 auto
}
</style>
"""
    )
)

this also works in case you want to not take a whole cells for the cell magic. thanks to @tfmark

^ This workaround does not work in JupyterLab 4.

It would be good to add a new style attribute to the tab widget itself to enable this.

Happy to have a look at this when I get the chance, albeit I don't know how to add a new style attribute to a widget. Is it a similar fashion to the quoted link below still? Or is there any documentation on how to do this?

Here is an example of adding a style attribute to a widget: https://github.com/jupyter-widgets/ipywidgets/pull/1834/files

[deco-dev]

Hello. @ollyhensby I have a question in your mention.

This workaround does not work in JupyterLab 4.

I can't not overwrite original widget css form jupyterlab 4?

[maartenbreddels]

FYI, a workaround would be to use ipyvuetify but that does give you a different look (Material Design).

An example with many tabs can be found on https://solara.dev/api/tabs (solara tabs use ipyvuetify tabs under the hood)

[urbanophile]

Hi, is anyone currently working on this issue? If not, will you accept a pull request that follows the general modification made here?

Here is an example of adding a style attribute to a widget: https://github.com/jupyter-widgets/ipywidgets/pull/1834/files

I came across this issue from another angle where I wanted to change the font colour of the tab labels but I couldn't do so because there's no style attribute.

[WesleyTheGeolien]

display(
    HTML(
        """
<style>
.jupyter-widgets.widget-tab > .p-TabBar .p-TabBar-tab {
    flex: 0 1 auto
}
</style>
"""
    )
)

this also works in case you want to not take a whole cells for the cell magic. thanks to @tfmark

I think this is the equivalent for JupyterLab 4

from IPython.display import HTML

display(
    HTML(
        """
<style>
.jupyter-widgets.widget-tab > .lm-TabBar .lm-TabBar-tab {
    flex: 0 1 auto
}
</style>
"""
    )
)