How to change the spacing on the Header Text

  • Profile Image
    SteveSoler
    Asked on September 20, 2014 at 06:38 PM

    Is there any way to adjust the amount of space that appears above and below the text when using the Text Widget? 

     

    Thanks.

  • Profile Image
    Jeanette
    Answered on September 20, 2014 at 11:51 PM

    If you want to reduce the space between the label (the text) and the box itself

    insert this code:

    .form-label-top, .form-label-left, .form-label-right {
        margin-bottom: 2px!important;
    }

     

    If you want to reduce the vertical space between each field, then check this guide

  • Profile Image
    SteveSoler
    Answered on September 21, 2014 at 02:01 AM

    Thank you, but I'm actually referring to the "Text" widget, not the Text Fields or Text Areas. The widget that does nothing more than add a line of text with no field associated with it. 

    Thanks.

  • Profile Image
    EltonCris
    Answered on September 21, 2014 at 06:13 AM

    @SteveSoler

    We do not have "Text Widget" so I assumed you mean the Text Tool under Form Tools like on the image below?

    Can you please let us  know the form in question so we can check the Text element? Basically, Text is always wrap with paragraph tags , you can remove these tags on the HTML editor (top toolbar when you click the text field) to reduce the spacing. Or you can inject the following CSS codes to your form.

    .form-html p {

    margin: 2px;

    }

    Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form

    This should get rid of the default paragraph top and bottom margins. If this doesn't work, let us know the form in question so we can inspect it here.

    Regards!

  • Profile Image
    SteveSoler
    Answered on September 21, 2014 at 06:47 PM

    Yes. The Text Tool is exactly what I am referring to. I tried the CSS you gave me but it didn't work.

     

  • Profile Image
    ashwin_d
    Answered on September 22, 2014 at 12:43 AM

    Hello SteveSoler,

    I did check all your form you have in your account (one form with multiple clone) and found that you only have one "Text" field in your form. 

    Please inject the following custom css code in your and see if that makes any difference:

    .form-html {

    padding: 0px !important;

    margin-top: -10px !important;

    margin-bottom: -6px !important;

    }

    Please add just the values as per your requirement.

    Thank you!

     

  • Profile Image
    SteveSoler
    Answered on September 23, 2014 at 12:06 AM

    I tried your CSS but it didn't work. 

    I have several clones because I always make a backup before making any changes just in case. 

    If you notice my form has 3 Tabs. At the top of each tab is a Text header that I placed there. That is the text in question. The headers read:

    How Can We Contact You?

    Where Are You Located?

    How Can We Help You?

    I would love to change the amount of space above and below these words.

  • Profile Image
    EltonCris
    Answered on September 23, 2014 at 01:50 AM

    @SteveSoler 

    Thanks for the clarification. We got it! :)

    So it's not actually the Text Tool, it's a Header Tool. :)

    Use the following CSS codes instead and inject it to your form.

    .form-header-group {

    padding-top: 4px !important;

    padding-bottom: 4px !important;

    }

    This applies to all your headers. You can change the 4px value if you want to adjust it's top and bottom spacing.

    Result:

    Cheers!

  • Profile Image
    SteveSoler
    Answered on September 23, 2014 at 10:04 AM

    My apologies to you all. I'm sorry. I'm not sure why I thought it was the Text tool, when it was actually the Heading tool I used. But thank you. The last CSS worked perfectly!

  • Profile Image
    ashwin_d
    Answered on September 23, 2014 at 10:27 AM

    Hello SteveSoler,

    On behalf of my colleague, you are welcome.

    I am glad to know that your issue is resolved.

    Do get back to us if you have any questions.

    Thank you!