#76719 Tabbed Content Not Displaying Properly
Jef Gunion 1 month, 1 week ago
I’m using the Tabbed Content feature (in Elementor) on several pages within a site. On desktop everything seems to work OK, but on mobile or other small devices one section does not scroll correctly to the top of that contained content when a different tab heading is clicked/tapped.
One of the pages with the tabbed content is: https://realsmartproperties.com/new-construction/
The tab in question is the first tab “ALL” which is the one the most content. The remaining tabs only have 1-3 listings. The issue is if you scroll to the very bottom of the “ALL” container, and then click on any of the other specific tabs/titles, the content goes directly to the bottom of the page into the footer area. This forces the user to swipe upwards to get to the content they want – very confusing! The ALL tabbed content should close, and the other tabbed content should automatically display at the top – taking its place. If you test this in responsive design mode on a desktop browser it functions correctly, but on any iPhone or Android it does not.
Is there a CSS snippet that will reroute the container content to the top of it’s corresponding container when a user clicks any tab heading?
Thank you so much for your help!
JefNodari Support Team 1 month, 1 week ago
Yes, I see, this is default element of the Elementor, can you please check this problem on the default theme? for a minute activate one of default WordPress theme and check again, if you still have the same problem you need to contact Elementor about this problem, otherwise, we will investigate it further with our developers
Thanks 🙂Jef Gunion 1 month, 1 week ago
Will temporarily switching to another WordPress theme affect anything in my JupiterX theme or settings?Nodari Support Team 1 month, 1 week ago
Good evening Jef
I understand your frustration about Elementor, but this is the normal troubleshooting process, we need to identify whether this problem is coming from theme or plugin.
No, it will not affect anything you can temporarily switch just for testing purposes
With best regardsJef Gunion 1 month, 1 week ago
OK, tested it in theme “Twenty Nineteen” and exact same behavior for the tabbed sections. When viewing the first tabbed area “All” and scrolling to the bottom of that (long) container, if any other tab [below that] is clicked the function shoots you to the very bottom of the page into the footer. The function “should” re-orient to the top of the chosen container, correct??? This seems like a glitch to me.
I would think some type of CSS trick/work-around could solve this, but that’s beyond my capability.
Thanks again for looking into this!
JefJef Gunion 1 month, 1 week ago
Jef Gunion 1 month, 1 week ago
- This behavior was referencing portrait mode in a mobile phone..
Is it possible to have every tab initially CLOSED [at first view] ?
Is there a CSS specification for that? This might “buy some time” with the client, until the scroll to top of active tab issue is resolved.
Thank you!!Danish Iqbal Support Team 1 month ago
It seems like you are using the Tabs widget that comes with the basic Elementor. I was checking it and it seems to have an issue. The issue is that it adds ID’s to the tab titles on the desktop only but on the small screens it removes the ID’s which makes it hard to fix the scrolling issue.
So, the JS code that I shared with you on the earlier ticket will only fix the issue on the desktop and not on the small screen devices.
Why don’t you try to use the Tabs widget that comes with the Raven plugin?