How can I change Single Choice right alignment so that the question takes up most of the line, leaving the two choices (Yes & No) on the right?

  • Profile Image
    rbell1
    Asked on September 25, 2017 at 05:16 PM
  • Profile Image
    BDAVID
    Answered on September 25, 2017 at 05:47 PM

    It appears to be a matter of form field position, please check this guide: https://www.jotform.com/help/90-Form-Field-Positioning 

    If you still need help, please let us know what the form and field in question is. You may share a screenshot of the field you are referring to: https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum 

  • Profile Image
    rbell1
    Answered on September 25, 2017 at 06:05 PM

    Thanks for your help.  The form is "Guest / Prepaid Visitor Agreement incl Pre-Exercise Screening Questionnaire".  We have a series of questions requiring a yes or no response.

    I would like to have the "yes" and "no" responses showing right aligned.  But when i choose that the questions are all bunched up on the left of the page.  I would like the questions to take up say 80% of the page width, with the yes/no answers showing on the right of the question.


  • Profile Image
    BDAVID
    Answered on September 25, 2017 at 06:40 PM

    Please inject the following CSS code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #label_64,#label_17,#label_66,#label_67,#label_68,#label_69,#label_70{

        width: 550px !important;

    }

    .form-multiple-column .form-radio-item{

        width: 70px !important;

        min-width: 70px !Important;

    }

    .form-multiple-column{

        margin-left: 5px;

    }

    Result: https://form.jotformpro.com/72676769014971 

  • Profile Image
    rbell1
    Answered on September 25, 2017 at 06:46 PM

    Thanks for that.

    That is getting closer.  However the questions are not all left aligned.  And the second line of each question needs to be left aligned also please.


  • Profile Image
    Jan
    Answered on September 25, 2017 at 09:58 PM

    Please insert this CSS code to align the text labels to the left:

    #label_64,#label_17,#label_66,#label_67,#label_68,#label_69,#label_70 {
    text-align: left !important;
    }

    Here's the result:

    Hope that helps. Thank you.

  • Profile Image
    rbell1
    Answered on September 26, 2017 at 04:41 AM

    Hi again.  Sorry, I should have mentioned we use this form on an ipad.  When I view it on the ipad it is still wrapping the yes/no answers to the next line below the question.

    Is there something else I need to do to make it render properly on the ipad?

    Thanks

    Richard

  • Profile Image
    Welvin
    Answered on September 26, 2017 at 08:23 AM

    Instead of the 550px, use 75% in the CSS for labels:

    #label_64, #label_17, #label_66, #label_67, #label_68, #label_69, #label_70, #label_73, #label_82 {

        width: 75% !important;

    }

    Let us know if that makes it. 

  • Profile Image
    rbell1
    Answered on September 26, 2017 at 04:10 PM

    That worked, thank you.

    I would also like to move the yes/no radio buttons at the bottom of this screenshot so that the yes/no answers appear just after the question.  Similar spacing to the yes/no answers after "Gender".

    Could you help with this too please?

    Thanks

  • Profile Image
    Mike
    Answered on September 26, 2017 at 04:33 PM

    The next CSS should fix the width of the radio button:

    #label_82 {
    width: auto !important;
    }

  • Profile Image
    rbell1
    Answered on September 26, 2017 at 04:39 PM

    Thank you.

    Can we also align the first 4 questions below to the left?


  • Profile Image
    aubreybourke
    Answered on September 26, 2017 at 04:50 PM

    Please add this CSS:

    .form-label.form-label-right {
        text-align: left;
    }

  • Profile Image
    rbell1
    Answered on September 26, 2017 at 04:56 PM

    Thank you.

    I would also like to left align the "I agree" below.  Can you please help with the too.


  • Profile Image
    Mike
    Answered on September 26, 2017 at 05:01 PM

    Try the next CSS:

    #label_77 {
    width: auto !important;
    }

  • Profile Image
    rbell1
    Answered on September 26, 2017 at 05:08 PM

    Thanks for that.  It moved the * to the left, but not the words "I agree":

  • Profile Image
    aubreybourke
    Answered on September 26, 2017 at 05:47 PM

    Seems to be an issue with the last CSS provided by Mike. You inserted it incorrectly. You are missing a closing bracket.

    It should read:

    .form-label.form-label-right {
        text-align: left;
    }
        #label_77 {
    width: auto !important;
    }

    And you will see this:



  • Profile Image
    rbell1
    Answered on September 26, 2017 at 06:09 PM

    Thank you.  My mistake.

    The form looks great now.

    Just wondering if you have a link to all the CSS code that we can use.

    Kind regards

  • Profile Image
    John_Benson
    Answered on September 26, 2017 at 08:28 PM

    I checked your form and it looks great. 

    You can find all the custom CSS code added to your form in the CSS tab of the Form Designer page. 

    You can also open the Advanced CSS Editor and go to the CSS tab if you want to view or know more information about the custom CSS added to your form. 

    I hope this information helps. If you have any questions, please contact us again.