8
Views
1
Comments
Tabs widget depends on containers class name

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.

Rank: #299

Hi Mykola,

Thanks for sharing this useful information with us!!

Thanks & Kind Regards,

Sachin