Tabs widget depends on containers class name

Champion

Rank: #150

Tabs widget depends on containers class name

Discussion

We've recently updated our Platform and deprecated tabs widget was removed. So we had to replace all usages with new OutSyetsmsUI Tabs block. It is very similar to deprecated one but it was not working correctly in our layout - tabs header were switching but the content didn't.

After some tests we have located the issue that Tabs functionality relies on class names:

var boundingRight = Math.round(tabheaders[$parameters.ActiveTab].getBoundingClientRect().right);
var screenBoundingWidthRight = moveheadertabs.offsetWidth - elementMargin;
var boundingLeft = Math.round(tabheaders[$parameters.ActiveTab].getBoundingClientRect().left);
var layoutsReactiveNative = document.querySelector('.layout.layout-top .main') || document.querySelector('.layout.layout-side:not(.layout-native) .main') || document.querySelector('.layout.layout-side.layout-native .main') ;
var oldLayouts = document.querySelector('.layout');
var layoutBoundings = 0;
var tabsScroll;
var scroollBehavior = "smooth";
var waitingTime = 100;

if(layoutsReactiveNative) {
layoutBoundings = layoutsReactiveNative.getBoundingClientRect().left;
} else if(oldLayouts) {
layoutBoundings = oldLayouts.offsetWidth - oldLayouts.querySelector('.main-content').offsetWidth;
}

___

In our layout we had nested containers to .layout.blank .screen .main-content and changing it to .layout .main-content fixed the issue.

on 18th Jan

Sachin Waghmare

Rank: #299

Hi Mykola,

Thanks for sharing this useful information with us!!

Thanks & Kind Regards,

Sachin

on 18th Jan

Training

Documentation

Tabs widget depends on containers class name