How do I reduce the padding size of different fields in form?

  • pantheraone
    Asked on April 15, 2019 at 3:55 AM

    Hi, the field names I'm looking into are detail, photo, condition for the entire form. Thanks.

  • Kiran Support Team Lead
    Replied on April 15, 2019 at 9:43 AM

    I have checked your JotForm and unable to find the fields with the field names that you have mentioned. Are you referring to the Text area field and the file upload field shown in the screenshot below?

    155533574215042019 190409 Screenshot 10

    Could you provide us with more information on your requirement along with a screenshot so that we can guide you in the right direction?

    We will wait for your response. Thank you! 

  • pantheraone
    Replied on April 15, 2019 at 10:43 AM
    Spacing between these fields
    [image: image.png]
    ...
  • Kiran Support Team Lead
    Replied on April 15, 2019 at 11:46 AM

    It looks like that you have attached the screenshot to the reply email. Please note that the images attached to the reply email cannot be posted back to the forum post. Please open the thread https://www.jotform.com/answers/1792925 and attach the image as shown in the screenshot below:

    1555343164ForumScreenshotUpload Screenshot 10

    We will wait for your response. Thank you! 

  • pantheraone
    Replied on April 15, 2019 at 12:03 PM

    All the gaps in between fields like these.

    1555344198gaps Screenshot 10

  • Kiran Support Team Lead
    Replied on April 15, 2019 at 1:25 PM

    You may try injecting the following CSS code the form to reduce the spacing between the fields for Item 1 on your form.

    #id_96, #id_178, #id_122, #id_177 {

        margin-top: 2px !important;

        margin-bottom: 2px !important;

        padding-top: 2px !important;

        padding-bottom: 2px !important;

    }

    For the other Item sections, you'll be required to get the other field IDs to add to the code.

    https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names

    Please give it a try and let us know if you need any further assistance. We will be happy to help. 

  • pantheraone
    Replied on April 15, 2019 at 2:13 PM

    TQ! It looks more compact now on my mobile.

    Need another assistance on CSS sizing for the objects:

    Configurable List and Input table. Both to size it such that can fit mobile screen.

    1555351901Screenshot 20190416 015801 Screenshot 10



    1555351959Screenshot 20190416 015848 Screenshot 21


  • Kiran Support Team Lead
    Replied on April 15, 2019 at 2:59 PM

    Please try adding the following CSS code to the form to make the Input table fields display properly in the mobile devices.

    th.form-matrix-column-headers {

        min-width: auto;

    }

    You may follow the guide below to make the configurable list responsive as well.

    https://www.jotform.com/help/456-How-to-Make-the-Configurable-List-Widget-Mobile-Responsive

    Thanks!