Buy Now
Sign in

Chronoforms v6 Partition Area Tabs

drgolden , May 02 at 16:14
D
drgolden
In v5 a tabbed form displayed all the tabs within the bounds of the page by creating new lines:v5_tabs.png
However in v6 using partition area tabs, the tabs go across the page and don't create new line(s) as below. (There are actually 4 tabs that are not displayed in the image below) I can't find any setting, etc. Is there a setting or worklaround I am missing?
v6_tabs.png
H
healyhatman
You can set the overflow settings on the tabs with custom CSS. Have a search on the forums I posted a reply about fixing this issue (I can't find it for you I'm out at the moment). Or send me a PM and I will find it when I get home.
You need to set overflow and overflow-x settings to enable you to scroll the tabs when they go off screen.
Web developer at SkySpider.com.au
H
healyhatman
OK I got it.
Add the following to your css
div.ui.top.attached.steps.G2-tabs { overflow:auto; overflow-y: hidden; }
Web developer at SkySpider.com.au
D
drgolden
Thanks for the help. I found your solution about 30 mins ago, and have been working with it. That is a solution that will work. It creates a nice slider under the steps.
Originally, I was looking to replicate the v5 multirow tabs (as in my first image), but haven't found any way to replicate that design.
H
healyhatman
You can add "stackable" to the Class field of the Partition.
Web developer at SkySpider.com.au
D
drgolden
I am a little thick headed. Under Designer, Area Partition, Edit , the Class is "ui container fluid". Is this where stackable goes. I have tried multiple iterations and no joy.
H
healyhatman
Yes add it to the list. Maybe remove the custom CSS I had you add.
Web developer at SkySpider.com.au
D
drgolden
Still no joy. Here are screenshots of the setup and results:
ttl.png
Attachments
v6BE.png
v6BE.png
(27.53 KiB)
28 Downloads/Views
v6FE.png
v6FE.png
(113.06 KiB)
27 Downloads/Views
ttl.png
ttl.png
(138.33 KiB)
45 Downloads/Views
H
healyhatman
Leave my code in then, I think the stacked class only works for mobile views . Should be able to resize the window or use Chrome developer mode with the device view to see it in mobile view.
Web developer at SkySpider.com.au
D
drgolden
Thanks for your help. I think I will go with your original suggestion.
H
healyhatman
If you want it stacked on mobile you can just do both things
Web developer at SkySpider.com.au