Tabs widget: How to reduce space between tabs and the header

SteveSoler

Asked on September 26, 2014 at 12:24 PM

I just noticed something has changed on one of my forms and I'm not sure how. Please have a look for me. The form is http://www.jotform.us/form/42568661763162.

The change is on the first page of the form. There is now a big space between the tabs and the header. That was not there before and I didn't make any changes.

Can you please help?

Thanks.

Page URL: http://www.jotform.us/form/42568661763162
Ben

Replied on September 26, 2014 at 2:28 PM

Hi Steve,

I took a look at your jotform and I see what you mean.

It seems to be added by our tabs widget and set to be of 50px high.

You can remove it by injecting this code into your jotform

/*Hide the space when jotform is viewed*/
.form-section > .form-line[data-type="control_widget"]:first-child
{
height: 1px;
max-height: 1px;
display:none;
}
/* Show the widget in the JotForm Form builder */
.form-section > .form-line[data-type="control_widget"][style="cursor: move;"]:first-child
{
height: 50px;
max-height:50px;
display:inline-block;
}

You can see here how to Inject Custom CSS Codes.

Now it will work with just display:none; being set, but if some code makes it shown again, I wanted to be sure that it will not be impacting your jotform, so the entire code should cover it and if the field gets removed in the future, your jotform should also not be changed from the code ;)

You can see it applied here: http://form.jotformpro.com/form/42685657010960

You can also clone it if you want by following these steps here: How to Clone an Existing Form from a URL

Do let me know if that works the way you wanted it :)

Best Regards,
Ben
SteveSoler

Replied on September 26, 2014 at 3:10 PM

That worked. Thanks!
Ben

Replied on September 26, 2014 at 4:18 PM

Hi,

Great to hear that :)

Let us know if you have any further questions.

Best Regards,
Ben