What CSS code should I use to pad the signature widget from the next widget field

  • debcm
    Asked on January 28, 2020 at 10:03 PM

    I am not sure I am setting the widget widths and adjusting the CSS code correctly

    I would like to have a wider signature box, then a spacing and then the name text fields as seen in the screeenshot

    I tried hiding a text field to allow for the appropriate spacing, but think using the appropriate CSS code would be better.

    Can you please advise.

    Jotform Thread 2136982 Screenshot
  • VincentJay
    Replied on January 29, 2020 at 4:33 AM

    Are you referring to this form? https://www.jotform.com/93412787818873

    I checked it and I was not able to find the issue. 

    1580290346vzgehs Screenshot 10

    Is that the correct form? 

    To position a form field, please follow this guide: 

    https://www.jotform.com/help/90-Form-Field-Positioning



  • debcm
    Replied on January 29, 2020 at 10:35 PM

    I want to position the signature box in the same row as the name/date field

    what's the correct code to space the example you have shown above side by side, as I can't seem to get this right no matter what I do?

  • debcm
    Replied on January 29, 2020 at 10:38 PM

    Forgot to add....

    I don't want to use the shrink setting for the signature field, as this makes the field too small on the page, as seen in my initial screenshot

  • John Support Team Lead
    Replied on January 30, 2020 at 4:23 AM

    Please try injecting this code to the form:

    #cid_253,#cid_251 {

        float: left;

    }

    #cid_252,#cid_254 {

        float: right;

        width: 200px;

        margin-top: -270px!important;

        margin-right: 500px!important;

    }

    GUIDE: How-to-Inject-Custom-CSS-Codes  

    Then inject this code to each of the Multiple Texts widgets:

    #input0, #input1 {

        width: 250px;

    }

    GUIDEHow-to-Inject-CSS-Codes-to-Widgets 

    Here's how it looks on my test form:

    What CSS code should I use to pad the signature widget from the next widget field Image 10

    You can increase the value of the properties in ORANGE should you want the Multiple Text widgets closer to each signature field.

  • debcm
    Replied on February 3, 2020 at 6:04 PM

    thanks - your example looks great!

    when I paste the code into my form however the multi text widgets do not move across into the position as per your example.

    I wander if my general/advanced settings on the question are also incorrect e.g width, shrink on?

    Can you advise what these question settings should be to get the formatting you have achieved?

  • debcm
    Replied on February 3, 2020 at 6:31 PM

    Ok I have fixed the code and it works well now!

  • John Support Team Lead
    Replied on February 3, 2020 at 7:34 PM

    That's great! Thanks for letting us know. Cheers! :)

    Let us know if you need further assistance with this.