How do I make 5 options horizontal?

  • Profile Image
    GraceConnections
    Asked on July 26, 2017 at 10:15 AM

     I have a question that asks people to rate something on a scale from one to five. It is laid out like a multiple choice (or single choice) but it will only let me put 4 options on a horizontal line and puts the 5th below it. How do I get all of the options on a single line?

  • Profile Image
    Chriistian
    Answered on July 26, 2017 at 01:16 PM

    To make the options in one horizontal line, we will need to inject custom CSS code. Please try the following custom CSS code on your form to make the options display in one single line.

    #cid_4 .form-radio-item {

      width:50px;

    }

    #cid_6 .form-radio-item {

      width:50px;

    }

    #cid_10 .form-radio-item {

      width:50px;

    }

    To inject custom CSS code to your form, just follow the instructions provided in this article: How to Inject Custom CSS Codes. Here is how the field will look like after injecting the custom CSS code to your form:

    Do let us know if you need further assistance.

     

  • Profile Image
    GraceConnections
    Answered on July 26, 2017 at 04:10 PM

    Thank you! That is helpful! I also have options on question 3 that won't go horizontally but they aren't numbers. Is there a way to fix that? Also, is there a way to enlarge the "other" textbox in a multiple choice? Thank you in advance!

  • Profile Image
    Chriistian
    Answered on July 26, 2017 at 04:33 PM

    Please inject this CSS to your form as well.

    #cid_5 .form-radio-item {

        width: 110px;

    }

     

    The result should be as shown below.

     

    To enlarge Other textboxes, inject the following CSS.

    .form-radio-other-input {

        height: 48px;

        padding: 10px;

    }

     

     

    The height and padding above can be adjusted based on your desired size.

    Let us know if you need further help.

  • Profile Image
    GraceConnections
    Answered on July 26, 2017 at 04:44 PM

    Again, that was super helpful! Thank you so much! Adjusting the height and padding works well to enlarge the box which is what I asked for but I should have specified, the box cuts off the end of what I have it say - is there a way to elongate it?