Responsive Tabs on Mobile

3 replies · opened Aug 31, 2020

TthiskagomeAug 31, 2020

Hello,

I am asking another question about my website.

If you look at this page on mobile, the tabs stack on top of each other for space. I noticed, for example, if I look at the 3rd or 4th tab and then scroll up the page a little to read all the content better, the first tab will open again.

I check some similar tickets already and I am using a very recent version of Canvas so I don't think the problem is the version.

Can you please advise?

SSemicolon WebSTAFFSep 1, 2020

Apologies about the Inconveniences!

We have checked this out and the issue appears to be with the Resize Event for the Tabs and the Address Bar of the iPhone/iPad resizing on Scroll Up/Down.

To fix this, find the following code in the js/plugins.tabs.js File:
[ch_pre type="js"]$(window).on( 'resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
SEMICOLON_tabsResponsiveResizeInit( element );
}, 250);
});[/ch_pre]

and replace it with:
[ch_pre type="js"]$window.on( 'resize', function() {
let thisWindow = $(this);
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if ( thisWindow.width() !== windowWidth ) {
SEMICOLON_tabsResponsiveResizeInit( element );
}
}, 250);
});[/ch_pre]

If you are using the js/plugins.js or the js/plugins.min.js File, you will need to Update these codes in this File as well.

This should definitely fix the issue. Hope this Helps!

TthiskagomeSep 15, 2020

Thank you, but I'm still stuck!Still having the same problem on mobile.

I updated the code on two of the files :

js/plugins.tabs.js
js/plugins.js

I couldn't find the code in the other file.

SSemicolon WebSTAFFSep 16, 2020

Hello,

We have already released this Update in the Latest Version of Canvas yesterday. Simply update your JS Files according to the Changelog provided: http://docs.semicolonweb.com/docs/changelog/version-6-0-6/ and your issue should be automatically resolved.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard