Code for tabbar from v3 fails in v5

Webix JS
#1

Hi,

I have this simple snippet of code to create a tabbar that worked ok in v3 but now fails in v5. Please tell me what is wrong?

https://webix.com/snippet/4930af48

Thank you

#2

Hello,

Your snippet does not contain potentially incorrect code, but it fails when setting the initial tab with the value:"tab1" line in Tabbar configuration.

It seems that a lot has changed in sizing logic since v3.0.

We will have a closer look at your snippet, and for now you can safely use the explicit Multiview+Tabbar junction instead of Tabview: https://webix.com/snippet/bc9f285d

#3

Thanks for the info.

With your snippet there is a space between the tabbar and the multiview. How do I get rid of that?

Also, How do I disable the slide transition effect?

#4
  1. https://docs.webix.com/api__ui.layout_type_config.html
  2. https://docs.webix.com/api__link__ui.multiview_animate_config.html
#5

  1. You can see in my snippet above that type: ‘space’ does not create a space between the tabbar and multiview.

  2. If I add “animate: false” to the multiview (in snippet from Helga) I get a script error:

var multiview = {
view: “multiview”,
animate: false,
cells:[
{ id: “tab0” },
{ id: “tab1”, header:“Boot Camp”, cols:[
{ view: “template” },
{ view: “resizer”},
{ view: “iframe”, id: “frame1”}
]}
],
};

#6
  1. In your snippet you use tabview, not tabbar+multiview. tabview has its own “line” layout. to achieve same effect you need to wrap tabbar+multiview into separate “line” layout.
  2. AFAICS “animate:false” has some concurrency problems in case if value (tabview or tabbar) is predefined. That’s why your snippet has script error (in tabview “animate:false” is by default). as a workaround you can try to set value after tabview is created. https://webix.com/snippet/261dda1c
#7

Thanks, that works