V4 TabBar vertical tabs question

Suite and Optimus Suite 5
#1

How do I get the new v4 TabBar to render the tabs vertically? I have an application that used the vertical tabs in v3.6. I tried using mode: “left” in the object definition, but the tabs are still horizontal.

        this.rltabbar = new dhtmlXTabBar({

            parent: "tabs-min",    // id/object, parent container where tabbar will be located
            skin: "dhx_skyblue",  // string, tabbar skin, optional
            mode: "left",          // string, top or bottom tabs mode, optional
            align: "top",         // string, left or right tabs align, optional
            //close_button:   true,           // boolean, render closing button on tabs, optional
            //content_zone:   true,           // boolean, enable/disable content zone, optional
            //xml:            "tabbar.xml",   // string, path to xml config, optional
            //json:           "tabbar.json",  // string, path to json config, optional
            //onload:         function(){},   // function, call after xml/json loaded, optional

            tabs: [ // tabs config

                {
                    id: "a1",      // tab id
                    text: "1
4
0
3
0
5
3
0
6",    // tab text
                    width: 130,      // numeric for tab width or null for auto, optional
                    index: null,      // numeric for tab index or null for last position, optional
                    active: true,      // boolean, make tab active after adding, optional
                    enabled: true,     // boolean, false to disable tab on init
                    close: false       // boolean, render close button on tab, optional
                },

Thanks,
Darrell

#2

Hello
“Left” and “Right” tabs orientation isn’t supported now from 4+ vesion.

#3

I wonder why you removed “vertical tabs” from 4+ version. It is very useful.

I want to attach a tabbar in a Layout cell. When the Layout cell collapse to the left of screen, I want the tabbar still show vertically (just like the sideway tabs in Visual Studio).

Do you have any workaround replacement? Do you plan to get it back in the near future?

Thanks,

#4

It was removed because was unpopular.
Could you provide us screenshot of your old version design? We will try to suggest you something

#5

I didn’t use old version. I just want to build a new application with Sideway tabs interface like Visual Studio interface.

Some times, I need to show many tabs and the text on each tab is a long string. In this case, a vertical tabbar is very convenient. Imagine the tabs are series of “Subjects”. It is listed on the left half of the screen. When users select a Subject from “tabs”, its “Content” shows on the right half of the screen. In this example, the vertical tabbar is perfect fit.

In my another project, I need a Sideway tabbar with 3-4 “long text” tabs. I like to rotate the text on tabs and show the tabbar on the left or right side of the screen.

Anyway, vertical tabbar is still useful, I think. Hope you still support it!

#6

You can try to use attached sample
Also you can use views instead of the attachIbject() metjod from demo

But if you need exactly left-side tabbar, you can contact us on sales@dhtmlx.com to ask for customization
tabbar_imitation.rar (1.04 MB)

#7

We used the vertical tabbar from version 3.6 to increase the available working space on the screen for a large form that contains a large number of fields and grids to display and edit the information. We used it that with vertical text to have tabs that were only 20 px wide on the side of the screen.

We have two issues that concern us in this situation.

  1. New features are important, but we have lost time on this project replacing the dhtmlx vertical tabs from our application with tabs from the jQuery UI library and troubleshooting the fact that the library no longer supported that feature. One of the reasons for purchasing a commercial library was to reduce rework when trying to advance the user interface.

  2. Another issue with several components, is that the components are rendering differently. Again the same skin settings did not render components that looked the same. The “Modern” grid skin was removed and I had to select “dhx_skyblue” and manually edit the stylesheet to get the gradient rendering for the top of the grids to show back up. The tabbar’s had gradient rendering with hover animation and that is not working anymore. It would be helpful if there was a list that clearly defines what was removed from the library.

#8

In your case we just can propose you a customization, because left/right tabbar orientation wasn’t included in dhx 4+ and will not be supported in future.