Makes tabs form template more UI on smartphone ?

[lcollong]

Hi,

We have a huge form with around 150 fields spreaded on 9 tabs on which 4 of them are joins !
We use the tabs form template to fill/display a record. So far, so good.
But the app is more and more used from smartphones.
One of the unconformable consideration comes from the way the tabs are rendered on a smartphone. Almost all of them stacked on top of the form which makes things difficult to manage and navigate.
I'm seeking an idea (js/css) or even new template to make it more usable on these terminals.
The idea would be to replace the tabs by a kind of dropdown under a given width. Ideally the "dropdown" or local menu would be fixed while scrolling down the screen to be able to change (and scroll up to) the group.
Other idea would be to have all the groups visible and stacked in a enormous scroll down together with a way to directly access the heading of each group (anchor ?). May be using a sliding menu (offcanvas).

All ideas or experiences welcomed !

 

[troester]

Just thinking: Would some open/close toggle do? Like in list groups or e.g. Regular Labs sliders?

 

[lcollong]

Mmmh may be. I could try to go further on Regular Labs Sliders. We already use them to show/hide a subgroup of fields (optional). The difficulty is to switch from one to the other "technique" as the width change (responsive). On desktop, the regular tabs template is fine....
Thanks

 

[lcollong]

Actually the regular labs tabs extension behavior on smartphones is a bit better. I'll see how it could be used instead of the Fabrik's one... Or, alternatively, their conditional content extension based on device type to show up or not the Fabrik's tab Or the slider.... I'll go deeper

 

[troester]

Maybe you can use also Regular Labs "Conditional content" for the menu item or inside form's default.php or setting the layout parameter...
Or Advanced Module Manager for building different desktop and mobile menues.

I like Conditionl Content/Advanced Module Manager because it stopps really the rendering on different devices. If you are using CSS .hideXY (e.g. in modules) the stuff is still in the page source.