What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by SteveSoler 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

    extra space form tabs widget form tabs space
  • Profile Image

    Answered by Ben on September 26, 2014 at 02: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 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
  • Profile Image

    Answered by SteveSoler on September 26, 2014 at 03:10 PM

    That worked. Thanks!

  • Profile Image

    Answered by Ben on September 26, 2014 at 04:18 PM

    Hi,

    Great to hear that :)

    Let us know if you have any further questions.

    Best Regards,
    Ben