Form Tabs widget: Not jumping at the correct tab/page and takes time to finish loading

I had pages sorted by tabs, and today all the tabs just disappeared. Please help me out!!

Everything was working yesterday.

Anyone...

I see another question about this same subject and we are not getting any reply. Repeat: the tab widget is not working for me! Even if I create a new form and use the tab widget, it sort of works in the preview, but the tabs always disappear in any browser on any computer when the form is used out of preview. Please help!

Apologies for the inconvenience. I'm currently looking at the problem. We will get back to you as soon as I finished making some tests.

Upon checking your widget, the list are separated by "comma", have you tried separating them in new lines?

This is how it looks like in live view.

Let us know if that resolves the problem.

I have two of these threads going, sorry. I'm going to try to keep it all here. Your programmers had to have made some adjustments overnight, so it is sort of working. I've tried everything: using the commas as you mentioned, by lines, moving the tab widget in the form, deleting everything and starting over. It just isn't working right still. I can now see it, which is a little better. I know multiple people are having the same issue because I've read their questions here. It all started over the weekend.

Sooo....I still can't navigate right, and some of the CSS is not working when it was earlier. Now, if I select something in the 2nd to last row of tabs, it jumps down to the last page. Also, I had some CSS on the current items that won't show anymore. I did nothing to get it show. I also made no changes to make it suddenly stop working. I hope the rest can get fixed also.

Our developers have updated the Form Tabs widget earlier. However, I'm checking your form and made a test form and I see there are problems on it.

Problems I saw:

1. Clicking the tabs jumps on a different one, not the one clicked.

2. It has some loading problems or it lags

I will forward this to our developers to have it checked and fixed. Apologies for the inconvenience.

If it helps to go back in time for a solution, I know everything was working great on November 13, 2015.

Thank you for the additional information. You could try reverting back to an earlier version of the form. But I believe this might not work as the widget will probably load it's latest version. For now, we'll need to wait for the developers to fixed this. I'm sorry for the trouble that this have caused you.

Hope this is still being reviewed. I need to know if the tabs widget is no longer usable in JotForm, which will force me to figure out a new way to create my form.

Hi,

Our development team are now working on this issue. This issue has been marked important. We will inform you on this thread any updates on the issue. Sorry for the inconvenience.

Regards.

It seems that by the couple hundred people who are looking at this thread over the past several days that this is a problem many people are hoping to have addressed. Is there any update? As a customer who paid for this service, I'm not sure that simply saying we've mark this issue as important is sufficient. I can't tell my customer that their form is marked as important and will be fixed sometime over the next few weeks.

I understand that telling you that the issue is raised as important is not something that you would like to hear again. What it means actually is that the developer assigned to this issue is looking into the same.

Sometimes however there are issues that happen to only some people and a fix that solves the issue for them, might create a new issue for one person or not solve the issue to one (or more) people, be it the form itself such as the combination of the widgets on it, its length, complexity, styles applied on it, or something else happening which is hard to recreate.

Please note that many times there are issues that only some of us can recreate or no one at all, which leads to our developers needing to go through everything just to find what could be causing this.

For example, I tried opening your form: https://form.jotform.com/52995683189981 which opened up right away from me.

I can however recreate the issue where wrong tab is being selected, but my opinion is that this is not the fault of the widget, but the number of tabs and their styles since they do seem to go over one another just slightly (when looking at them without inspecting them):

Now, I applied this CSS:

#tabs-list > li {
    margin: 2px;
    min-width: 140px;
}
#tabs-list {
    margin: 0 auto;
    width: 595px;
}

Which seems to resolve this issue (at least for me) and makes it displayed in a bit nicer (I am a person that likes to organize things) manner:

Now the styles that are originally on this form seem to show the background as white when some option is selected, but Tomato and Basil was selected.

Do add the CSS above to your form following these steps: Inject Custom CSS Codes, but adding it after all other code in there and do let us know how it goes.

In regards to the time that it takes when you click on the tab to display the tab, that it how the form tabs always worked - there are few checks that are activated:

- check if required fields are filled out

- validate the entered data based on the setup

- clear out value (if so set up) of hidden fields

- check if required fields are filled out on the new tab

- validate the entered data on the same tab

- clear out value (if so set up) of hidden fields

Hope that this helps out, so do let us know how it goes for you.

I appreciate the response. This is what I know...

Before November 16, the widget worked perfectly. After that, the widget completely disappeared (which doesn't happen now, you guys made repairs to the widget on your side so I can at least see it). Once the widget came back visible it quit working like it did before. I made a completely new form, that did not have any customization to the tabs, and it still did not function properly (it jumped around like mine does now).

I also lost the yellow background of the css on the current tab

This stopped working:
.tabs-list li.current {
  background: #ffc425 !important;
  color: #FFF !important;
}
That CSS is on the custom part of the tab widget.

I have placed your CSS in the form. It does make the tabs look more orderly, but it does not fix the clicking issue. When you click the last few tabs it skips to the end. You state that I have CSS that makes my current selection white - I don't see that, and I'm showing you the CSS above that doesn't work now, which should make the current tab yellow.

If 250 other people are viewing this thread, I don't believe the issue is isolated to my form. If the reason it keeps jumping is because I have too many tabs, I find that hard to believe. Why would you have a limit to the number of tabs you can have before it jumps to the last page?

Apologies for the inconvenience and thank you for sharing your thoughts in this.

One reason why the custom CSS code might not be working is because of the current problem that the widget has. I would suggest waiting for the issue regarding the incorrect jump on the tabs to be resolved before we can come up with a working CSS.

For now, I tried my test form and it is still showing the problem, and I see that the bug report is still opened and unresolved. Apologies again for the inconvenience.

OK, I've been able to fix the jumping around issue by selecting yes for: Allow navigation without validation. I don't need validation on any page except the last, so that works for me - you would think it would still navigate correctly if there wasn't anything there to validate, but it doesn't.

Still need help with that CSS not allowing the current tab to be styled. Please help.

Thanks!

I am glad to hear that the form is working properly for you now when the validation is turned off.

In regards to the CSS, using this will make it work properly:

#tabs-list > li.current {
    background-color: #ffc425 !important;
    font-weight: bold;
}

The reason why your code is not working is because of this CSS:

.tabs-list.default li.current {
    background: none #fff !important;
    z-index: 3 !important;
}

- It seems that this is a default code of the widget itself.

The code above (that I gave - blue one) will work since ID always has more importance than what class does and next to this I made it more specific by stating that it is li with the current class, that is the immediate child of that ID - so it should work even if there is some other change in the widget (unless that ID is removed - which should not happen).

For me the tabs still seem to work properly (the one selected gets shown), but I took a screen cap of this so that you can see it:

I do however see a big increase in the speed of the time that is taken to change tab, but as mentioned above, that is because 6 steps are taken from the equation.

As mentioned by my colleague this issue is still an active one and being looked into and as soon as the issue is identified our developers will issue a fix and update you about it here.

I would just like to mention that I apologize if my reply above was received in any bad manner, I might not have expressed myself properly. There are sometimes many issues that look similar, yet for us to find out that they are not connected in any specific manner, but the thread view is a great indicator of how many times someone had an issue with form tabs, or was interested to read about this before they made their setup.

Hopefully this will be resolved soon so you will be able to use the validation and that it will work just as it does without it - or at least close to the same speed.

Thanks for the follow up. Everything is looking normal and functioning as desired. I appreciate you getting that CSS sorted out. Please do update this when there is a more permanent fix to the widget. Thanks!

Hello, 

We've released a series of updates to the widget - which resolves the wrong tab assignment - performance issues with large forms among other optimizations. 

Even with navigation without validation turned off, your form should perform normally. 

There are some slight delays with switching tabs between large pages - and we've noted that and will work towards improving that. 

Kindly check - let us know how it works for you, and share any concerns you might have. 

Thanks!