How can I add more space in between the fields?

  • Profile Image
    Tennisforever
    Asked on October 26, 2017 at 09:07 PM

    Scorecard Correction Form

    How can I add more spaces between the fields that are below the 4 drop down menus.

    Thanks for your help.

    V

  • Profile Image
    candy
    Answered on October 27, 2017 at 02:59 AM

    I have cloned your form named "Scorecard Correction Form" on my side in order to test it. 

    You can inject following CSS codes to the form in order to add extra space between the text boxes and drop-down lists as you can see in the following screenshot below:

    #id_5{

    padding-top: 40px;

    }

    #id_14{

    padding-top: 40px;

    }

    1509087471Screen Shot 2017-10-27 at 9.57

    I hope this helps.

  • Profile Image
    Tennisforever
    Answered on October 27, 2017 at 12:45 PM

    Scorecard Correction Form

    What I really want is to increase the space between field 5 and field 14 on the row.  Or find a different way to align them farther apart.

    Thanks for helping me on this.

    V


  • Profile Image
    EltonCris
    Answered on October 27, 2017 at 01:02 PM

    My suggestion would be to make the textbox field width to 100% so it fits on its column container.

    To do that inject this CSS codes to your form.

    [data-type="control_textbox"] .form-textbox, 

    [data-type="control_fullname"] .form-textbox,

    [data-type="control_email"] .form-textbox,

    [data-type="control_textarea"] .form-textarea, 

    [data-type="control_dropdown"] .form-dropdown,

    [data-type="control_dropdown"] .form-input, 

    [data-type="control_dropdown"] .form-input-wide {

        width : 100% !important;

        max-width: none !important;

    }

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

    Result:

  • Profile Image
    Tennisforever
    Answered on October 27, 2017 at 01:06 PM

    Scorecard Correction Form

    I figured this one out.  It's putting this css code in for the first field:  

    /* set the two fields to share half of the form width each */

    #id_5 {

        width: 50%;

    }


    Now I would like to know how to get all of the fields to be aligned the same way on the left margin.  Currently, field 17 is farther to the left than the other fields.

    Thanks again,

    V


  • Profile Image
    EltonCris
    Answered on October 27, 2017 at 01:20 PM

    Any change with the offered solution above?

    Anyway, about your concern, this is how your form currently looks like in the preview.


    It is actually the width of the Team Names field that is overextending to the right which makes them looks connected. By simply reducing the width of this field, it should create more space. 

  • Profile Image
    Tennisforever
    Answered on October 29, 2017 at 08:31 PM

    Scorcard Correction Form

    The spacing between the fields below the drop menus shows like Match ID  and Team Names and so forth is showing fine now but the Your Name field is to the left and can't move it like the others.  Also when I do the form preview it shows all the fields in question close to each other.

    Thanks for your help.

    V

  • Profile Image
    liyam
    Answered on October 29, 2017 at 10:47 PM

    I have made a test with your form by expanding its width. What I found is that the fields are actually sitting next to each other. As a result, the fields are quite difficult to be controlled due to its column settings and some parts where it automatically moves down due to its responsive state.

    Rather than give you a bit more instructions which may come confusing, I just addressed the said issue and the field that extends to the left is now fixed, as well as the spacing between fields.

    Please let us know if there are others that you need to be adjusted.

  • Profile Image
    Tennisforever
    Answered on October 29, 2017 at 11:00 PM

    Scorecard Correction Form

    Thank you so much for all your help.  I have one more favor to ask and I think it will be the last one with this form.  

    Under the Team Names it shows the example in two lines instead of being in one line like New England Patriots vs Atlanta Falcons

    The form shows it in two lines and the preview shows one line.  

    Thank you for correcting it.  

    V

  • Profile Image
    candy
    Answered on October 30, 2017 at 03:03 AM

    I have recloned your form named "Scorecard Correction Form" again. I have seen that the sub-label of "Team Names" field is already two-lines in the form builder as seen below:

    1509346230Screen Shot 2017-10-30 at 9.50

    However, the sublabel is one-line in the published form as seen below:

    1509346304Screen Shot 2017-10-30 at 9.51

    I have forwarded this issue to our software developers in order to investigate it.

    Besides, Injecting following CSS codes to the form will fix the problem as seen the screenshot below:

    #input_14, .form-sub-label {

      width: 100px !important;

    }

    1509346451Screen Shot 2017-10-30 at 9.53

    I hope this helps.

    Let us know if you need any further assistance. 

  • Profile Image
    Tennisforever
    Answered on October 30, 2017 at 09:31 AM

    Scorecard Correction Form

    Thanks again for your prompt responses.  Jotform's customer service is unbelievable.

    I tried to enter the code for the sub label under Team Names and it didn't work.  It only works in the preview.

    V

  • Profile Image
    aubreybourke
    Answered on October 30, 2017 at 10:50 AM

    Still no update from the developers yet. They will reply via this thread as soon as it is possible for them.

  • Profile Image
    liyam
    Answered on October 30, 2017 at 01:08 PM

    For the meantime, while the issue is being investigated, please replace your existing .form-label CSS code at the bottom using this one:

    .form-label, .form-sub-label{
      width: 230px !important;
    }

    Thanks.

  • Profile Image
    Tennisforever
    Answered on October 31, 2017 at 11:55 AM

    Scorecard Correction Form

    Thank you so much!!! That worked great.  One last thing, the support group had given me the code below to delete the logo space and for some reason the add-your-logo is back.


    .jotform-form {



        padding: 0px 0 !important;



    }


    Thanks!

    V


  • Profile Image
    liyam
    Answered on October 31, 2017 at 12:46 PM

    If you are referring to this one on the part of the form builder:

    15094682342017-11-01_0043.png

    Unfortunately, that cannot be removed as it is a placeholder for the builder for ease of access for the users to add their logo. That, by default, does not appear when the form is published.

    But if I am misunderstanding your concern, please provide us more details on the matter.

    Thanks.

  • Profile Image
    Tennisforever
    Answered on October 31, 2017 at 02:09 PM

    Video & response from support

    Scorecard Correction Form

    Thanks for the response.  I have attached the previous response with the code to delete the space add your logo.  I am trying to keep the forms in one page when we print them. The attached code and worked and that logo space was gone.  We added a lot of codes to the form  and now it doesn't work.

    Thanks

    V

  • Profile Image
    EltonCris
    Answered on October 31, 2017 at 02:41 PM

    I inspected your CSS codes and I see no issues. They are working fine. Your form is displayed in a single page on print preview.

    Take note that it is not possible to remove the JotForm branding logo if you are on the free plan.

    If I have misunderstood your question, please let us know what you are trying to achieve this time. Thanks