Canvas Support

Nested Responsive Tabs - doubling up on mobile view

5 replies · opened Sep 17, 2020

MmhynesSep 17, 2020

Hi,

I am using responsive tabs.
On desktop view I have a date as the main tab on the left, with time slots showing (per date).
Clicking on the time slot will display records in a further container.

So the over all layout is a side-tab with an inner tab-container and that inner tab-container is made up of a side-tab with tab-container. Nested. On desktop view my tabs look fine.

When I move to mobile, it doubles up the headings on the tabs. Is there any way to prevent this and to only show one of each in mobile view?

Thanks,
Maria

SSemicolon WebSTAFFSep 18, 2020

Hello,

Apologies about the Inconveniences caused and Thanks for reporting this!

This could be considered a bit naive on our part as we didn't take the use of nested Tabs into consideration. And the fix is very simple! Simply find the following code in the js/functions.js File inside the tabsResponsive: function() Function Block:
[ch_pre]elementNav = element.find('.tab-nav'),
elementContent = element.find('.tab-container');[/ch_pre]

and replace it with:
[ch_pre]elementNav = element.children('.tab-nav'),
elementContent = element.children('.tab-container');[/ch_pre]

This will definitely work fine. Hope this Helps!

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

MmhynesSep 19, 2020

Hello! Thank you for this solution - I've implemented it and it is working and showing only the one heading when I view the page on mobile. You are a genius!

I have a follow-up question, though, and I'm hoping it might be another simple adjustment in the functions.js file. Since making this change the behaviour of the toggle is not the same. Clicking on the toggle icon doesn't hide the tab content anymore. It is only when I select a different heading that the first content closes and the new content opens. I would like it such that I can have all content closed and only see the headings, if needed, by clicking on the close icon (which was how it worked prior to this update). I've attached an image showing the close icon that doesn't hide the content now.

Is this something that can be changed?

Thank you,

Maria

SSemicolon WebSTAFFSep 21, 2020

Hello,

So glad that the issue was resolved. Very Happy to Help!

Since, this is an Accordion (not a Toggle), One Title/Content within the Accordion is open by default and closes only when clicked on another Title/Content. So this is the expected behavior. But we already have an included functionality which allows you to Collapse Content within the Accordions. Simply add the data-collapsible="true" Attribute to the .tab-container DIV.

This will definitely work fine. Hope this Helps!

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

MmhynesSep 21, 2020

Thank you for your suggestion with this. I can see now that the tabs switch to Accordion format when screen turns to Mobile view and they are tabs when it is viewed in a Desktop. However data-collapsible="true" is not available in my version of Canvas. I am using all files from Canvas version 5 for this site.
I have tried adding class="collapse" and data-toggle="collapse" to the various elements. While I can get this to in Desktop, collapsing still does not work when in Mobile view.

If you have any suggestions that will work in Canvas v5 I would appreciate that.

Thanks,
Maria

SSemicolon WebSTAFFSep 21, 2020

Hello,

The data-collapsible Attribute is already available in Canvas 5. Make sure that your accordions:function() Function Block in the js/functions.js File is updated with the Latest Version of Canvas 5's accordions:function() Function Block.

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