Ipywidgets: 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?)