#76719 Tabbed Content Not Displaying Properly

Landing Forums JupiterX WordPress Theme Tabbed Content Not Displaying Properly

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • Jef Gunion

    Hi,

    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!

    Jef

    Nodari Support Team

    Hey Jef

    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

    Will temporarily switching to another WordPress theme affect anything in my JupiterX theme or settings?

    Nodari Support Team

    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 regards

    Jef Gunion

    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!

    Jef

    Jef Gunion
    • This behavior was referencing portrait mode in a mobile phone..
    Jef Gunion

    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

    Hello Jef,

     

    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?

     

    Regards.

Viewing 8 posts - 1 through 8 (of 8 total)
You must be logged in to reply to this topic. Login