Moving answer box to the right

  • charonjames
    Asked on December 28, 2016 at 10:49 AM

    Can you tell me how to move the quantity boxes to the right so that answer text to the left of it does not wrap to the next line? For instance, I want "Reg gel mani w/gel removal $90" to appear on the same line instead of moving the "$90" to the next line due to lack of space.

  • BJoanna
    Replied on December 28, 2016 at 11:55 AM

    To move all quantity boxes to the right and to prevent wrap of all labels, you will need to increase the width of your field labels. You can do this inside of Form Designer. Once you open Form Designer select Label Styles tab and change the label width from 150 px to 270 px.

    Moving answer box to the right Image 1 Screenshot 30

    After that your form will look like this. 

    Moving answer box to the right Image 2 Screenshot 41

    Here is my cloned form: https://www.jotformpro.com/form/63624237641960 

    Feel free to clone it.

    Hope this will help. Let us know if you need further assistance. 

  • charonjames
    Replied on December 28, 2016 at 12:39 PM

    Thank you. While that did work, it also pushed the "Add a tip" field and credit card data fields to the right. I would like them to stay in their original position with the label on the left (not top). How can I accomplish my original request while not changing the location or style of anything else on my form?

  • BJoanna
    Replied on December 28, 2016 at 1:12 PM

    Sorry about that. I did not noticed that mentioned fields were pushed to the right as well. You can leave the width of labels set to 280 px inside of Form Designer and add this CSS code to your form:

    #label_56, #label_30 {

        width:150px!important;

    }

    https://www.jotformpro.com/form/63625508776971 

    Or you can change back width of filed labels to 150px and add this CSS code to set the width of all field labels with quantity boxes:

    #label_75, #label_81, #label_76, #label_82, #label_84, #label_85,

    #label_86, #label_87, #label_89, #label_90, #label_91, #label_92,

    #label_94, #label_95, #label_96, #label_97{

    width:280px!important;

    }

    https://www.jotformpro.com/form/63625342311952 

    This will be result for both options.

    Moving answer box to the right Image 1 Screenshot 20

    Hope this will help. Let us know if you need further assistance.