How do I indent a few questions?

  • duqadmin
    Asked on May 4, 2017 at 8:58 AM

    I would need corrective action is taken and additional work order template needed.

  • Ashwin JotForm Support
    Replied on May 4, 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:

    How do I indent a few questions? Image 1 Screenshot 20

     

    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!

  • duqadmin
    Replied on May 4, 2017 at 10:30 AM

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

  • RyanC
    Replied on May 4, 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;

    }

  • duqadmin
    Replied on May 4, 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?

  • RyanC
    Replied on May 4, 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;

    }

     

  • duqadmin
    Replied on May 4, 2017 at 11:25 AM

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

  • RyanC
    Replied on May 4, 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

  • Ashwin JotForm Support
    Replied on May 4, 2017 at 1: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!