[CLOSED] bottom tabs

[Z]

If i have more buttons than space in the bottom tab, will it swipe left/right so i can get to the other tab icons?
chrome (emulation mode) wont do it.
/Z

[fabricio.murta]

Hello @Z!

Yes, this is an issue of the tabs, at least as far as the related example in Examples Explorer go. I see recent ExtJS Modern versions have fixed this by giving the tab an "elastic width" somehow.

I see ExtJS 6.2.1 Examples do not have this issue, while 6.0.2 does. But we have in github Ext.NET (in an unstable branch) merged with ExtJS 6.2.1 and the issue still persists. So it points towards Sencha just fixed the issue with CSS overrides in the example.

We will take a look on what changed between versions and provide you further advice how to deal with this issue, currently believing the Ext.NET Mobile version will work with that fine if the proper adjustments are made to the example.

We'll post an update here soon.

[Z]

ok. awaiting your fix
/Z

[fabricio.murta]

Hello @Z!

While investigating, I seen that the issue is actually with the mobile triton theme, and is still actual even with the newest ExtJS version. You can see the issue in the corresponding pure-ExtJS example for ExtJS 6.5.1 (https://examples.sencha.com/extjs/6.5.1/examples/kitchensink/?modern&profile=modern-triton#bottom-tabs) (notice it will only open the modern ExtJS toolkit if you load the link from a mobile phone -- or chrome under device emulation mode).

This means the information that ExtJS has addressed this issue in their current version is not really true, they "hid" this issue by using the Material theme, introduced in an ExtJS version newer than the on currently in Ext.NET.

As for the solution for your problem, if you just have a fixed amount of tabs, you can set the max-width of the tabs to the percentage of the window left for each tab. For example, 5 tabs, 100 / 5 = 20. Maybe, due to padding, 19% would work best. In the 5 tabs example then:



.x-tabbar-inner .x-tab {
max-width: 19%
}


But if you have a dynamic amount of tabs, then this max width, even in percent, must also change. You probably may want a global minimum (like, maybe, 10%?), but that's not going to be trivial to implement, unfortunately.

Well, good news is that enabling tab to be scrollable is pretty straightforward, just add this to your tab panel to set up the tab bar to be scrollable:



<TabBarConfig Scrollable="Horizontal" />


As you are using the tabBar docked down, you might be using Docked="Bottom" on your TabBarConfig tag already, so keep it to keep the tabBar at the bottom.

I hope this helps!

[ojuniour]

We have implemented the change and it worked - specifically adding "<TabBarConfig Scrollable="Horizontal" />".

[fabricio.murta]

Hello, @ojunior! And welcome to Ext.NET forums!

Glad the solution worked for you too! Thanks for the feedback, we really appreciate it!