CSS code to reduce the vertical spacing between form feilds

  • Keithy
    Asked on March 28, 2016 at 1:33 AM
    However, I've added more sections to my form and am trying to match the code to tighten the vertical spacing between the other fields but am having serious trouble and can't figure it out! :-/ Can you help me? This is the last piece of the puzzle. So excited to almost be done!!
  • Chriistian Jotform Support
    Replied on March 28, 2016 at 2:56 AM

    The css code wil be very long as there are a lot of fields that we need to adjust. Allow me some time to investigate the issue further and I will get back to you with the css to reduce the vertical spacing between the form fields.

    Regards.

  • Chriistian Jotform Support
    Replied on March 28, 2016 at 5:11 AM

    Here's the full code that you can apply to adjust the spacing between the fields. I would suggest deleting the old css and injecting this new css to your form.

    #id_70, #id_71, #id_72, #id_73 , #id_74, #id_75, #id_76, #id_77, #id_109 , #id_110 , #id_111 , #id_112, #id_113

    ,#id_114,#id_115,#id_116,#id_92,#id_93,#id_94,#id_95,#id_96,

    #id_97,#id_98,#id_99,#id_120,#id_121,#id_122,#id_123,#id_124,#id_125,#id_126,#id_127,#id_128,#id_129,#id_130,#id_131,#id_132,#id_133,#id_134,#id_135,#id_136,#id_137,#id_138,#id_139,#id_140,#id_141,#id_142,#id_143,#id_147,#id_148,#id_149,#id_150,#id_151,#id_152,#id_153,#id_154,#id_155,#id_156,#id_157,#id_158,#id_159,#id_160,#id_161,#id_162,#id_163,#id_164,#id_165,#id_166,#id_167,#id_168,#id_169,#id_170,#id_173,#id_174,#id_175,#id_176,#id_177,#id_178,#id_179,#id_180,#id_181,#id_182,#id_183,#id_184,#id_185,#id_186,#id_187,#id_188,#id_190,#id_191,#id_192,#id_193,#id_194,#id_195,#id_196,#id_197,#id_199,#id_200,#id_201,#id_202,#id_203,#id_204,#id_205,#id_206,#id_208,#id_209,#id_210,#id_211,#id_212,#id_213,#id_214,#id_215,#id_220,#id_221,#id_222,#id_223,#id_224,#id_225,#id_226,#id_227,#id_228,#id_229,#id_230,#id_231,#id_232,#id_233,#id_234,#id_235,#id_236,#id_237,#id_238,#id_239,#id_240,#id_241,#id_242,#id_243,#id_244,#id_245,#id_246,#id_247,#id_248,#id_249,#id_250,#id_251{

        margin: 0;

    }

    #id_71, #id_110,#id_93,#id_121,#id_129,#id_137,#id_148,#id_156,#id_164 ,#id_174,#id_182,#id_191,#id_200,#id_209,#id_221,#id_229,#id_237,#id_245{

        position: relative;

        top: -19px;

    }

    #id_72, #id_111,#id_94,#id_122,#id_130,#id_138,#id_149 ,#id_157,#id_165,#id_175,#id_183,#id_192,#id_201,#id_210,#id_222,#id_230,#id_238,#id_246{

        position: relative;

        top: -29px;

    }

     

    #id_73, #id_112,#id_95,#id_123,#id_131,#id_139 ,#id_150,#id_158,#id_166,#id_176,#id_184,#id_193,#id_202,#id_211,#id_223,#id_231,#id_239,#id_247{

        position: relative;

        top: -48px;

    }

    #id_74, #id_113 ,#id_96,#id_124,#id_132,#id_140,#id_151,#id_159,#id_167,#id_177,#id_185,#id_194,#id_203,#id_212,#id_224,#id_232,#id_240,#id_248{

        position: relative;

        top: -66px;

    }

    #id_75, #id_114 ,#id_97,#id_125,#id_133,#id_141,#id_152,#id_160,#id_168,#id_178,#id_186,#id_195,#id_204,#id_213,#id_225,#id_233,#id_241,#id_249{

        position: relative;

        top: -84px;

    }

    #id_76, #id_115 ,#id_98,#id_126 ,#id_134,#id_142,#id_153,#id_161,#id_169,#id_179,#id_187,#id_196,#id_205,#id_214,#id_226,#id_234,#id_242,#id_250{

        position: relative;

        top: -102px;

    }

    #id_77, #id_116,#id_99 ,#id_127,#id_135,#id_143,#id_154,#id_162,#id_170,#id_180,#id_188,#id_197,#id_206,#id_215,#id_227,#id_235,#id_243,#id_251{

        position: relative;

        top: -120px;

    }

    You can check out this cloned form to see it in action: https://form.jotform.com/60871267217963 

    Do let us know if you need further assistance.
    Regards.

  • Keithy
    Replied on March 28, 2016 at 9:45 AM
    A million thanks!! You all have been so helpful and prompt throughout! Im so appreciative!
    -Keith
    Sent from the lifestream
    ...
  • Jan
    Replied on March 28, 2016 at 10:57 AM

    On behalf of Christian, you are welcome. We are here to assist you so please let us know if you need any help. Thank you also for your compliments.

  • Keithy
    Replied on March 30, 2016 at 5:01 PM

    Did I mention how awesome your help has been? Thank you for writing the custom code because I would have never been able to figure that out.Truly impressed with how quick and thorough your responses are. 

    With that being said, just one more question...lol. The space between the inventory rows is perfect, but now there is a big space after the last inventory row and start of new section...is there a way to fix that? If not, no worries as I don't want to break the code, but thought I would ask...

    Thank you again!!

     

     CSS code to reduce the vertical spacing between form feilds Image 1 Screenshot 20

  • Chriistian Jotform Support
    Replied on March 30, 2016 at 9:37 PM

    Thank you for your feedback. To better assist you with your latest concern, I have moved your question to a new thread. You can check out that thread by following this link: https://www.jotform.com/answers/806597.

    Regards.