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.

Tab with a lot if items and long captions

See original GitHub issue

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

image

image

Scrollbar in Excel: image

Thanks! Sergey.

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:3
  • Comments:15 (6 by maintainers)

github_iconTop GitHub Comments

5reactions
jasongroutcommented, Nov 5, 2018

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>
2reactions
tfmarkcommented, Jul 27, 2021

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

How To Write Short Instagram Captions in 2023 [+Examples]
1. Instagram shortens your caption after three to four lines, so include important details in the beginning. Only about the first sentence will...
Read more >
445 Best Instagram Captions for 2022: Good, Cool, Funny ...
Finding a good Instagram caption is a challenge, especially if you ... work with these awesome people, working on a lot of awesome...
Read more >
Long table additional caption indentation - TeX
I used X column type in my example, which uses all available space for the columns. If the width of the caption is...
Read more >
Video: Take tables of contents (TOCs) to the next level
Intermediate table of contents · To add a dot leader, or dotted line, between each entry and its page number, click the Tab...
Read more >
Manual for Formatting Figures and List of Figures in Thesis or ...
smaller font size on figure captions, but it cannot be below 8 point. If the embedded item does not fit within your text...
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