Tabs not working (mobile)

Does the same thing when you make the Window smaller (makes it more narrow), the other tabs than the current suddenly disappears.

Hi @refowork,

Thanks for choosing Otter!

I checked this on my test instance, but the tabs work properly for me even on mobile. I checked your site and there are some errors in the console – screenshot, mostly related to Litespeed. Could you please deactivate all the plugins except Otter and check if the issue persists? To do it safely, please install the Health Check & Troubleshooting plugin, enable the troubleshooting mode which will deactivate all plugins, reactivate Otter and check if the issue persists. If the problem doesn’t occur anymore, it means it was indeed caused by a plugin conflict and you should reactivate the plugins one by one, until you find the culprit.

I hope this helps!

Hi, thanks for all the suggestions.

The problem is not that I am unable to press the one of the TABS. It is when pressed that the other TABS disappear. The issue appears when the TABS block becomes a single column with only 1 TAB visible horizontally.

I tried to disable all plugins. I tried to run Health Check. The problems persisted.

I tried on other browsers. Same issue. I tried on another computer (Chrome) same issue.

Could it be that the TABS does not support a Form and/or large amount og text?

• This reply was modified 1 year, 3 months ago by refowork.
• This reply was modified 1 year, 3 months ago by refowork.

Hi @refowork,

Thank you for explaining the current problem. I’d like to clarify that this is not an issue, just the way the tabs block was designed to behave on Mobile devices with the recent updates of the Otter Blocks plugin.

The tabs now appear one below each other on mobile devices (screenshot). You can test this behavior on this page.

The reason the Tabs block doesn’t behave the same on the page you shared is because the section where the tabs were added has overflow hidden, and the second tab can’t be displayed due to the long content of the first one and the section being trimmed.

If the Tabs block is allowed to expand vertically automatically, it works as expected.

I hope this will help.

Hi,

Thanks. It sorta helped. I knew it could potentially be an overflow issue, but it’s still an issue non the less as I want the full text to be visible. Could any of the things below fix this?

1. Would it be possible to set overflow to show/auto/scroll?
2. Would it be possible to allow more characters in the tab? I think thats a .php issue, no?
3. I don’t see the option to make the TABS vertical on mobile. Could you guide me?

Hi @refowork,

I’ve checked the page with the tabs block from Otter again, simulating a mobile screen size, and I can see those are displayed vertically when the page is loaded, however, the overflow changes the tabs’ layout once a different tab is clicked.

To troubleshoot this I recommend temporarily switching to a default theme of WordPress, such as Twenty Twenty-Three, and also disabling the other plugins. This can be done with the troubleshooting mode of the Health Check plugin available in Dashboard -> Plugins to be installed. Enabling them one by one and changing the theme should reveal the cause of the different layout

It’s easier to search for the code causing the conflict if it’s clear from which product is coming, the theme or a particular plugin.

Regards,
Stefan

Hi @refowork,

It’s been a while since we have heard from you. We will now be closing this thread if the issue has already been resolved. Kindly open a new thread if you have other questions or concerns.

Would it be possible to open this? It’s still happening, tried it with a fresh installation of wordpress 6.4 (no other plugins installed, just otterblocks). The tabs render perfect initially on mobile, once you click a non-active tab, that tab opens and all other tabs disappear.

Hi @n3ith4n,

Please open another support topic and include a screen recording with the issue. It would also help to tell us the phone and the browser you used, so we can better dig into this.

Best regards,

Irinel