[CLOSED] bottom tabs

  1. #1

    [CLOSED] bottom tabs

    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
    Last edited by fabricio.murta; Dec 01, 2017 at 5:17 PM.
  2. #2
    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.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    ok. awaiting your fix
    /Z
  4. #4
    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 (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!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    We have implemented the change and it worked - specifically adding "<TabBarConfig Scrollable="Horizontal" />".
  6. #6
    Hello, @ojunior! And welcome to Ext.NET forums!

    Glad the solution worked for you too! Thanks for the feedback, we really appreciate it!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Grid Panel Bottom Bar
    By aditi in forum 1.x Help
    Replies: 1
    Last Post: Apr 08, 2014, 6:40 PM
  2. [CLOSED] Move tabs Tabs Style Google Chrome
    By majunior in forum 1.x Premium Help
    Replies: 7
    Last Post: Apr 30, 2013, 12:58 PM
  3. [CLOSED] TabPanel tabs activating differently if remove tabs
    By rnachman in forum 1.x Premium Help
    Replies: 7
    Last Post: Mar 15, 2013, 3:41 PM
  4. Tag For Time (bottom right) in Desktop
    By yash.kapoor in forum 2.x Help
    Replies: 0
    Last Post: Oct 22, 2012, 6:16 AM
  5. GridPanel Bottom tool bar help
    By gopikrishna in forum 1.x Help
    Replies: 0
    Last Post: Mar 06, 2011, 8:28 AM

Posting Permissions