How can I increase the spacing between the question and the textbox?

  • Profile Image
    Symbool
    Asked on August 21, 2019 at 06:28 AM

    I would like to have a bit more space between the question and where the box start. The question is so close to the box. Is there a way to increase this a bit more?

    Screenshot
  • Profile Image
    aliemir
    Answered on August 21, 2019 at 09:40 AM

    You can do this with CSS injection. Please follow the steps below:

    1. In the form builder, click the "Form Designer" icon.

    1566393443Screen Shot 2019-08-21 at 16.1

    2. Click on the CSS tab, and paste the code below in the "Inject Custom CSS" area. You can arrange the space between question and box with changing height's number.

    .form-label.form-label-top {

        height : 35px;

    }

    1566394348Screen Shot 2019-08-21 at 16.3

    3. Finally, make sure to click on the Save button.

    1566394451Screen Shot 2019-08-21 at 16.3


    To learn more about CSS Injection, please visit the following link: 

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes


    If you have any further questions, please feel free to let us know.

  • Profile Image
    Symbool
    Answered on August 22, 2019 at 06:45 AM

    I have tried, but this does not solve my issue:

    1566470551Jotform spacing.JPG


    I would like more spacing at the red arrow. I tried your suggestion with the CSS injection, but could not get it right.


    1566470653Jotform CSS code.JPG

    Please help....

  • Profile Image
    omergulen
    Answered on August 22, 2019 at 07:59 AM

    You can do it by with CSS Injection as my colleague mentioned above.

    1. In the form builder, click the "Form Designer" icon.

    15664738931566393443Screen Shot 2019-08-

    2. Click on the CSS tab, and paste the code below in the "Inject Custom CSS" area. You can arrange the space between question and box with giving question label margin-bottom. It will give set additional space between question and box.

    Please try to replace the CSS code down below with existing CSS code:

    .form-label.form-label-left.form-label-auto {

        margin-bottom: 10px;

    }

    1566474045Screenshot at Aug 22 14-35-43.

    3. Finally, make sure to click on the Opslaan button.

    1566474102Screenshot at Aug 22 14-36-10.

    If you need further assistance, please ask away.

  • Profile Image
    Symbool
    Answered on August 23, 2019 at 03:53 AM

    Perfect, that works!

    Thanks!!!