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
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
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
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
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
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.
healyhatman
You can add "stackable" to the Class field of the Partition.
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
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.
healyhatman
Yes add it to the list. Maybe remove the custom CSS I had you add.
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
D
drgolden
Still no joy. Here are screenshots of the setup and results:
ttl.png
Attachments
v6BE.png
v6BE.png
(27.53 KiB)
153 Downloads/Views
v6FE.png
v6FE.png
(113.06 KiB)
159 Downloads/Views
ttl.png
ttl.png
(138.33 KiB)
204 Downloads/Views
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
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
D
drgolden
Thanks for your help. I think I will go with your original suggestion.
healyhatman
If you want it stacked on mobile you can just do both things
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman