Custom CSS to remove the spacing between fields

  • CDP_Europe
    Asked on October 14, 2019 at 9:59 AM

    Hello, 


    Please could you provide some custom CSS to remove the spacing between fields and hide additional headings, as suggested in this article - https://www.jotform.com/answers/1639126-How-can-I-have-every-answer-exported-to-a-multiple-choice-element-in-a-different-cell-or-column-in-my-spreadsheet-


    The data sets are: 

    4-5

    6-14

    20-34


    Thanks, 

    Lucy

    Jotform Thread 1999964 Screenshot
  • BJoanna
    Replied on October 14, 2019 at 10:27 AM

    I do not understand the data sets part of your question.

    The data sets are: 

    4-5

    6-14

    20-34

    Can you please provide us more details about this part of your question?

    Also, on the screenshot, you provided there is 5 "Activity in Asana (select all that apply)" fields, but your form has 11. Do you want to remove spacing and headings for the first 5 fields or for all Activity in Asana (select all that apply) fields? 

  • CDP_Europe
    Replied on October 29, 2019 at 5:51 AM

    In other words, please could you remove spacing and headings for all form elements that have the heading 'Grant / Project (select all that apply)' and all elements that have the heading 'Activity in Asana (select all that apply)'


    Also, please remove spacing for all the number elements from 'Corporate' up to an including 'Member State Permanent Representative'


    Thanks!

  • AndrewHag
    Replied on October 29, 2019 at 10:39 AM

    Please add this CSS code to remove all the heading:

    #label_8,#label_9,#label_10,#label_11,#label_12,#label_13,#label_14,#label_15,#label_16,#label_17,#label_52,#label_19,#label_53

    {

    display:none !important;

    }

    Also, could you please provide some more information if you want to remove the spacing between two fields or between the text of the fields, so that I can provide you CSS for that.

    How-to-Inject-Custom-CSS-Codes

  • CDP_Europe
    Replied on November 1, 2019 at 7:09 AM

    The CSS code isn't changing anything - am I meant to add additional information to the code?


    Re spacing, I would like to remove the spacing between the elements with the same headings so that they display like a list of options. 


  • Girish JotForm Support
    Replied on November 1, 2019 at 9:46 AM

    Have you tried using the Form Designer to reduce the spacing between the fields?

    Please check this related guide for possible solutions: https://www.jotform.com/help/62-How-Can-I-Change-Spacing-Between-Questions 

    Do try and let us know the update.

  • CDP_Europe
    Replied on November 1, 2019 at 10:41 AM

    Thank you, that has resolved the spacing issue. 

    But what about the headings please?

  • BJoanna
    Replied on November 1, 2019 at 11:23 AM

    Please add the following CSS code to remove the labels:

    #label_59,#label_60,#label_61,#label_62,#label_63,#label_64,#label_65,#label_66,#label_67,#label_55,#label_56

    {

    display:none !important;

    }

    How to Inject Custom CSS Codes

    This will be a result. 

    1572621671css Screenshot 10

    Here is a demo form - https://form.jotform.com/93044622021949

    Fell free to test it and clone it