Disappearing Tabs in Tab Panel on Screen Rotate [Modern 6.6.0]

[rbarnes]

Ext Version Tested:
6.6.0 Modern Toolkit

Browser Tested:
Chrome

Fiddle:
(You'll probably want to open this Fiddle in its own tab, as testing this requires resizing the Fiddle Viewport.)



Description:
When the Viewport changes from Tall to Wide mode, all tabs except the first tab in my tab panel disappear. My goal was to make a mobile-responsive tab panel main menu for my app where the tabs would be stacked horizontally (hbox) on top in tall mode and stacked vertically (vbox) on the left side in wide mode. I had too many tabs for small devices in wide mode, so I tried to add a scroller overflow handler. I used the responsive mixin / plugin to set the tab layout and position in tall and wide modes. The combination of the scroller and setting the layout in responsiveConfigs causes all tabs except for the very first tab to disappear and be inaccessible when the Viewport is changed from tall to wide a couple of times.

Steps to Reproduce the Problem:
If starting in Tall mode (height > width):
1. You should see the tabs on the top of the Viewport.
2. Resize the Viewport so that it changes to Wide mode (width > height).
3. Resize the Viewport so that it changes back to Tall mode.
4. Resize the Viewport so that it changes to Wide mode again.
5. You should now see that all tabs except the very first have disappeared.

If starting in Wide mode (width > height):
1. You should see the tabs on the top of the Viewport.
2. Resize the Viewport so that it changes to Tall mode (height > width).
3. Resize the Viewport so that it changes back to Wide mode.
4. You should now see that all tabs except the very first have disappeared.

Expected Behavior:
The tabs continue to be present and accessible, as if I had started out in wide mode and not rotated / resized the screen.

Actual Behavior:
All tabs in the tab panel except the the very first tab are no longer shown and no longer accessible.

[rakumar]

Hi there,

The issue was with overflow:'scroller' property. Removed it and now the fiddle is working fine.

Regards,
Kumar.
Sencha Support.

[rbarnes]

That is not a satisfactory solution. What if I want to use the scroller overflow handler? Why should including that property cause the whole thing to break? I am quite confident that this a bug that needs fixing.

[wemerson.januario]

i think it is a bug too. overflow should be reseted/removed when screen is tall and hbox

[pakumar]

Thanks for the report! I have opened a bug in our bug tracker.