double row tabs bug display

How to fix double row tabs causing layout issues in ChronoForms.

Overview

The problem occurs when using many tabs in a large form, which can push tabs into a second row and create unwanted white space.
Apply a CSS rule targeting the .tabs class to correct the layout without needing to restructure the form into sliders or multiple pages.

Answered
Ch Chellaoui 03 Apr, 2014
Hi everybody,

I'm creating a big form using Chronoforms V4 and have come across a small bug display but which ruin the harmony.

Link with this message, you'll find an image of what happen when I click on each of the tabs of the first row. An annoying white space pushes the rest of the tabs.

Is there a fix to prevent that behaviour or is it all my fault for having a form too big? 😲

Thanks you for this amazing free extension.
Gr GreyHead 03 Apr, 2014
Hi Chellaoui,

I think that you are asking too much of the Joomla! tab code :-(

You could try making the labels shorter use <br /> to fold the longer ones onto two lines; or, perhaps better, use sliders instead of tabs as they will handle may more sections smoothly; or, better still turn this into a multi-page form.

? is it actually a single form - it looks more like a big menu to me?

Bob

Bob
Ch Chellaoui 03 Apr, 2014
Hi GreyHead,

Thanks for the quick response,

Yes I know, this form is way too big, but I wanted everything in one form so i could maybe share it conveniently with other webmaster but that part I don't really master yet so I kept adding adding until I came across that bug.

So you say it's a joomla! tab, I thought Max wrote it, I should maybe ask to a joomla! forum then...

I used an element custom element with <br/> between the first and the second tabs without success.
I tried the slider thing and it works well but it's not as convenient as the tab because you can't see everything without scrolling down which is a pain.
I am really hesitating to turn this into a multi-page form because I've put so much work in it and everything works perfectly except for that annoying bug display, so I'm still weighting the pros and cons.

It IS a single form :-) , 12 tabs connecting 10 databases and everything works with ajax calls. The page never reloads and dynamically shows the data from db and dynamically updates it. I wrote much of the code myself because of the ajax part and the need to clone element, I mainly used chronoform to create the form and to practice joomla! in a more guided way.

It's my first joomla! project, thank for your time and sorry for my english.

Mokhtar
Ch Chellaoui 28 May, 2014
Answer
Hi again,

I fixed this bug totally randomly, I was looking to style my form using this guide .

I tried to add this css rule cf_inputbox { border: 1px solid blue; } which didn't work, so I tried various selector until I tried this one .tabs.

And miraculously, It fixed my double row tab bug display! I don't know why, I don't know how but it works.

Hope this will help other people

Cheers,

Mokhtar
This topic is locked and no more replies can be posted.