Answered: Tab panel with partially scrolling tab bar
Answered: Tab panel with partially scrolling tab bar
Hey guys,
I'm trying to create a panel which has the layout type 'vbox', with pack: 'start'
It contains one child panel with a fixed height, and one tab panel with no specific height defined.
Since the pack parameter of the parent panel's layout is set to 'start', the tab panel resizes itself according to its content, and the entire parent panel allows for scrolling.
Now, what I want to do is this: when the user scrolls beyond the height of the first child panel, the tab bar of the tab panel should "stick" to the top.
Then, when the user scrolls back up, the tab panel should move down again once its default position is crossed.
(Like the pin headers in a grouped list).
Any ideas on how I should go about implementing this?
Yes, you would have to detect scrolling and add the tab bar to the container if the tab panel is scrolled under the container and when the top of the tab panel is back in view add the tab bar back to the tab panel.
Ok. So you could try to add the tabbar to the panel with vbox. Off top of my head I'm not sure if this will break the tab changing so you may have to do some custom coding for that but that will get the tabbar to stick but let the inner items to still scroll.
So you could try to add the tabbar to the panel with vbox.
Isn't it already? Both Child-1 and Child-2 are items in the Container panel.
Having just a tab panel as a child and getting it scrollable is not a problem. What I'm trying to accomplish is this:
Due to the pack property of the container, Child-1 and Child-2 are arranged one after the other in a vertical direction, correct?
Which means that the tab bar lies somewhere in the middle of the screen (below Child-1)
Now, since scrolling is disabled in all child panels, when I drag the screen, the Container scrolls. (Which is good)
But, the tab bar eventually scrolls out of the screen from the top side. I want it to stick once Child-1 has gone out of the screen. When I scroll back, it should move back when its time for Child-1 to come back into the screen.
I'm really not sure if I'm explaining this properly. Please let me know if a diagram or something will help.
Oh. I just got it. Are you suggesting that I add just the tab "bar" to the Container?
I could do something like that, and even write the custom code required to ensure proper changing the tabs, but, how would I make it scroll as described in my previous reply?
Yes, when you add the tabbar to the container it will remove it from the tab panel and add it to the container so it's not a child of the tab panel anymore.
Yes, when you add the tabbar to the container it will remove it from the tab panel and add it to the container so it's not a child of the tab panel anymore.
So in this case, the tabbar will appear "between" Child-1 and Child-2. (Essentially, the Container will have 3 children)
But even in this case, when the user scrolls the Container, the Child-1 will scroll up and out, followed by the tabbar, followed by the tabpanel.
How can I get the tabbar to behave like the list group headers?
If you were to add it to the container with vbox and scrollable then it will be pinned to the top not between the child items.
Only if I dock it to the top, correct?
In any case, I don't think we're on the same page here.
I don't want the tabbar to be permanently docked/pinned to the top of the container.
You know how in a grouped list, when we scroll, the header of the current group sticks to the top when the list is scrolled down, but moves back in place when the list is scrolled back up?
I want the same behaviour for my tabbar.
It should only be pinned to the top when Child-1 scrolls out of the screen. It should become move again when Child-1 scrolls back into the Container.
Answered: Tab panel with partially scrolling tab bar
Originally Posted by mitchellsimoens
Reply With Quote
