tab layout: extra whitespace

[hainm]

hi (the tittle might not be correct, feel free to update it).

Please see the whitespace in bottom right of below image.
(To be compatible with ipytwidgets master branch, you need to install development version of nglview)

PS: The new UI (from jupyterlab) is very cool. cheers.

[jasongrout]

Is there any way you can reproduce this problem with just standard widgets, i.e., tabs, hbox, vbox, dropdown, etc.?

[hainm]

Hi. I am not sure :(. I will update if find one. Thanks.

[hainm]

Hi @jasongrout

Please see minimal code below

names = ['General', 'Representation', 'Preference', 'Theme', 'Extra', 'Help']
tab = Tab([Box() for _ in names])
[tab.set_title(i, title) for i, title in enumerate(names)]
tab

[jasongrout]

Are you talking about how the tab contents box extends beyond the tabs? Are you saying that the tab contents box should stop where the tabs stop?

[hainm]

Yeap Hai

…

On Apr 24, 2017, at 10:17 AM, Jason Grout ***@***.***> wrote: Are you talking about how the tab contents box extends beyond the tabs? Are you saying that the tab contents box should stop where the tabs stop? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[jasongrout]

Thanks. I think the tab contents is filling the space available by default. If we had only one tab, we'd certainly want that. If you'd like the tab box to be shorter, you can set the layout.width of the tab control. Is that sufficient control?

[jasongrout]

This is also consistent with other containers, like the Accordion and Box, which expand horizontally in the available space.

[jasongrout]

That said, what I saw as the issue with your screenshot is that there is a huge space between labels and controls. I can't replicate that, though:

from ipywidgets import *
names = ['General', 'Representation', 'Preference', 'Theme', 'Extra', 'Help']
tab = Tab([IntSlider(description='hi') for _ in names])
[tab.set_title(i, title) for i, title in enumerate(names)]
tab

[jasongrout]

[hainm]

If you'd like the tab box to be shorter, you can set the layout.width of the tab control. Is that sufficient control?

You mean set it to 100%? Or you meant set it to be equal to tab control width?

That said, what I saw as the issue with your screenshot is that there is a huge space between labels and controls.

I think that's due to layout option I made to align labels and controls. I will wait until ipywidgets stable to spend more effort on that. But can you try to put exact control, dropdown like my image? I guess I did have a good reason to do that in the past (may be to make it look nicer).

[jasongrout]

You mean set it to 100%? Or you meant set it to be equal to tab control width?

You can set it to whatever you want. 100% would give the existing behavior (unless you resize the browser, in which case it may become narrower). Setting the tab .layout.width to a specific pixel value would let you have precise control.

[jasongrout]

But can you try to put exact control, dropdown like my image?

Dropdown looks fine too:

[hainm]

Hi, I should be clearer: Can you try all of them in the same tab as mine? two sliders + two dropdowns.
(I tried the default layout with v 6.0 a while ago but there was not a nice layout).

Per

Setting the tab .layout.width to a specific pixel value would let you have precise control.

I am not sure this will work with different screens.

[jasongrout]

I am not sure this will work with different screens.

Can you maybe draw a mockup of what you are wanting? I think I'm still a bit confused about what you're proposing.

Each tab in the tab bar is fixed-width (or at least has a fixed max width). The contents box fills the area, by default. The tab widget as a whole is the width of the contents box. Many tab UIs have this - the tabs across the top are not stretched across the whole tab widget. Would it help to have another box at the end of the tab bar that extends to the edge of the tab widget?

Can you try all of them in the same tab as mine?

Works fine for me on current-ish master or so.

[hainm]

Can you maybe draw a mockup of what you are wanting? I think I'm still a bit confused about what you're proposing.

Sorry. I will try to post one. Can we leave this issue open for now? I am sure I will have something updated in the future. thanks.

[jasongrout]

Can we leave this issue open for now?

Of course