How do I indent a few questions?

  • Profile Image
    rlzolinas
    Asked on May 04, 2017 at 08:58 AM

    I would need corrective action taken and additional work order needed indented under all items.

  • Profile Image
    ashwin_d
    Answered on May 04, 2017 at 10:24 AM

    Hello rlzolinas,

    I did check your form and both the question seems to be displayed correctly. Please check the screenshot below:

     

    I would suggest you to please let us know what changes you want to do and how you want both the fields to be indented, we will try to help you.

    We will wait for your response.

    Thank you!

  • Profile Image
    rlzolinas
    Answered on May 04, 2017 at 10:30 AM

    I would like those questions indented. Maybe 100 pixels to the right?

  • Profile Image
    RyanC
    Answered on May 04, 2017 at 10:41 AM

    Just add these custom CSS

    .form-line {

        padding-left : 120px;

    }

     

     

     

    If you want the questions only

     

    .form-label-top {

        font-weight : bold;

        padding-left : 120px;

    }

  • Profile Image
    rlzolinas
    Answered on May 04, 2017 at 10:48 AM

    Hi, I do not want all of the questions to move though. I would like the sub questions indented under the main questions like this:

    2. check ceramic floor tile in front of shower

            corrective action taken

            additional work order needed?

    3. check showerhead for flow

            corrective action taken

            additional work order needed?

  • Profile Image
    RyanC
    Answered on May 04, 2017 at 11:19 AM

    Try to add these codes

     

    #label_8, #label_9,#label_11,#label_12#label_14,#label_15,#label_17,#label_18,#label_20,#label_21,#label_23,#label_24,#label_26,#label_27,#label_29,#label_30,#label_32,#label_33,#label_35,#label_36 {

        padding-left : 60px;

    }

     

    #label_38,#label_39,#label_41,#label_42,#label_44,#label_45,#label_47,#label_48,#label_50,#label_51 {

        padding-left : 60px;

    }

     

    #input_8,#input_11,#input_14,#input_17,#input_20,#input_23,#input_26,#input_29,#input_32,#input_35,#input_38,#input_41,#input_44,#input_47,#input_50 {

        margin-left : 60px;

    }

     

    #cid_9,#cid_12,#cid_15,#cid_18,#cid_21,#cid_24,#cid_27,#cid_30,#cid_33,#cid_36,#cid_39,#cid_42,#cid_45,#cid_48,#cid_51 {

        margin-left : 60px;

    }

     

    #label_12 {

        padding-left : 60px;

    }

     

  • Profile Image
    rlzolinas
    Answered on May 04, 2017 at 11:25 AM

    The yes/no radio buttons are still aligned left. Other wise, this would work.

  • Profile Image
    RyanC
    Answered on May 04, 2017 at 11:29 AM

    #cid_9,#cid_12,#cid_15,#cid_18,#cid_21,#cid_24,#cid_27,#cid_30,#cid_33,#cid_36,#cid_39,#cid_42,#cid_45,#cid_48,#cid_51 {

        margin-left : 60px;

    }

     

    Try to add these, then clear browsing data your browser and then try to open

  • Profile Image
    ashwin_d
    Answered on May 04, 2017 at 01:01 PM

    Hello rlzolinas,

    You do not need to inject separate css code for input and labels. I believe the best way is to add margin per row and that should solve your problem. I would suggest you to please inject the following custom css code and see if this gives you desired result:

    li#id_8, li#id_9, li#id_11, li#id_12, li#id_14, li#id_15, li#id_17, li#id_18, li#id_20, li#id_21, li#id_23, li#id_24, li#id_26, li#id_27, li#id_29, li#id_30, li#id_32, li#id_33, li#id_35, li#id_36, li#id_38, li#id_39, li#id_41, li#id_42, li#id_44, li#id_45, li#id_47, li#id_48, li#id_50, li#id_51 {

        margin-left: 60px;

    }

    The following guide should help you on how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Thank you!