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

  • Profile Image
    pantheraone
    Asked on April 15, 2019 at 03:55 AM

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

  • Profile Image
    Kiran
    Answered on April 15, 2019 at 09: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.png

    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! 

  • Profile Image
    pantheraone
    Answered on April 15, 2019 at 10:43 AM
    Spacing between these fields
    [image: image.png]
    ...
  • Profile Image
    Kiran
    Answered 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.png

    We will wait for your response. Thank you! 

  • Profile Image
    pantheraone
    Answered on April 15, 2019 at 12:03 PM

    All the gaps in between fields like these.

    1555344198gaps.jpg

  • Profile Image
    Kiran
    Answered on April 15, 2019 at 01: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. 

  • Profile Image
    pantheraone
    Answered on April 15, 2019 at 02: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.png



    1555351959Screenshot_20190416-015848.png


  • Profile Image
    Kiran
    Answered on April 15, 2019 at 02: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!