-
minemetitiriAsked on January 22, 2017 at 6:03 PM
I have a form that has tabs. But I don't want every page break to be a tab. Its an application for a program that has a lot of info. To make the form more understandable, sections have been created using the page breaks. But the sections that are part of the tab show up as numbers and they should just be under the labeled tab as a group and not tabbed as separate individual sections. Is there a CSS code I can inject to remove the tabs I don't want so that only the sections that are most important are tabbed? Currently the sections I don't want to show as individual tabs show as numbers. I want them to be under the submission tab as one, but keeping with the page breaks when the applicant is working to make it easier to understand.
Page URL: https://form.jotform.com/70168027288157 -
Kevin Support Team LeadReplied on January 22, 2017 at 8:55 PM
You cannot move the other tabs into one single tab and they will be always shown even if you do not list them in the form tabs settings.
But, you can hide them and the form will work fine as well, though the other pages of the form will not be listed under the tabs they will be accessible by clicking on the next button.
To hide the page that you do not need, please inject this code:
li#form-tab-7, li#form-tab-8, li#form-tab-9 {
display: none;
}
Guide: How-to-Inject-Custom-CSS-Codes
I have also applied this code to a cloned form of yours and here is the result: https://form.jotform.com/70217658219964
Feel free to clone it.
-
minemetitiriReplied on January 23, 2017 at 1:06 PM
Thank you!
How can I center them so that they are all on one line instead of two? The CSS code I used in the past isn't working for some reason.
-
KadeJMReplied on January 23, 2017 at 3:00 PM
On behalf of Kevin you are very welcome.
If the css code you had used in the past isn't working then something probably changed such as the form-tab ID's aka the number at the end per say.
Also, the form width or container can affect it drastically if condensing it or if being embedded.
Try using this code instead:
tabs-list {
width: 1200px !important;
float: center;
margin: 0 !important;
}
I've highlighted in the darker green above the extra line of css I added into it to change the width and that should force it onto one line.
Updated Version of your Form: