How do I individually change the spacing of each inputs question and response box?

  • Profile Image
    laurencarson19
    Asked on October 28, 2020 at 09:47 PM

    I have many inputs some with questions that are short or longer. I want to know how to individually alter each of these inputs to make the question and box close enough together for the shorter questions and for the longer ones have the questions nicely stacked and the answer box close to it as well. Also how do I make all of my yes no choice questions align with one another and keep them in one row. Please let me know.

  • Profile Image
    Sonnyfer
    Answered on October 29, 2020 at 01:27 AM

    Hi - You can either shrink the fields through PROPERTIES > ADVANCED > Shrink.

    1603949107_5f9a52330c6b9_shr.gif

    OR adjust their size/spacing by injecting custom CSS. Here's How-to-find-field-ids-and-names

    Please give it a spin and let us know if you face any difficulties along the way. We'll be happy to assist you further.

  • Profile Image
    Lauren 
    Answered on October 29, 2020 at 10:57 AM

    Yes, I figured out how to do that but what if I want email to be on one line? When I shrink, then choose the label alignment to the left it puts email on one and address on another

  • Profile Image
    laurencarson19
    Answered on October 29, 2020 at 11:02 AM

    Also further along in the form, I have a question about the condition of the home. How do I make all the letters stay on one line for instance excellent the t is on another line. I have it shrunk and aligned to the left but when i unshrink it, it takes away the close spacing of the answers.

  • Profile Image
    Bojan_J
    Answered on October 29, 2020 at 12:02 PM

    but what if I want email to be on one line?

    Can you please clarify this? Do you wish to have all the text and the input in one line?

    In this case, please add the following CSS:

    #id_7 label {
     width: 110px !important;
    }

    If you wish to align other fields as well, please use the following:

    label {
     width: 110px !important;
    }

    How do I make all the letters stay on one line?

    Please note that you should preview the form live, from the Publish tab. This way, you will see that the text in the Condition of Home field displayed properly:

    screenshot_2558.png

    Please let us know if you have any additional questions.

  • Profile Image
    laurencarson19
    Answered on October 29, 2020 at 01:30 PM

    Yes, I want Email Address to be on one line and the answer box following instead of on two lines. How do I integrate CSS?

  • Profile Image
    laurencarson19
    Answered on October 29, 2020 at 01:34 PM

    The issue is when I input the CSS it changes all, but I want to create individual widths for each input because some questions are longer than others and I want the answer boxes to be generally around the same distance from each question.

  • Profile Image
    Bojan_J
    Answered on October 29, 2020 at 02:56 PM

    I apologize for forgetting to provide the guide on how to inject custom CSS.

    To specify the width of each field and label individually, you first need to find the element's value. You can do this by pressing the F12 key on the form page. This will open a side panel with the inspector. Make sure you are in the Elements tab and select Selector:

    screenshot_2567.png

    Now, you can click on the element of the form you wish to use:

    screenshot_2569.png

    This should highlight the element in the inspector. From there, you can find the element's ID:

    screenshot_2568.png

    You need to use this in the CSS. Please make sure you place # before the element ID, and wrap the width style inside curly brackets:

    #label_165 {
    width: 150px;
    }

    You need to do this with each individual item you wish to edit.

    You can view this short Loom video for more information:
    https://www.loom.com/share/9763d72c102a4efa83f63cbb114fc90d

    Let us know if you have any additional questions.

  • Profile Image
    laurencarson19
    Answered on October 29, 2020 at 05:31 PM

    Thank you. I was able to do that, but it only changes the layout of it on the edited page but when I go to the preview none of these changes show up. How do I make it change the actual final document?

  • Profile Image
    laurencarson19
    Answered on October 29, 2020 at 05:36 PM

    Also, now all of my changes did not save. Do we have to save it somehow?

  • Profile Image
    Sonnyfer
    Answered on October 29, 2020 at 08:12 PM

    I checked your form and it seems it indeed didn't save the changes you made. Kindly inject them again and don't forget to press the save button as shown below:

    1604016673_5f9b5a21aec85_

  • Profile Image
    laurencarson19
    Answered on October 29, 2020 at 09:02 PM

    Sorry that is not how I originally made it. I will retry with the saving option but mine did not look like that when editing. Also, in terms of the yes no bubble questions how do I keep them aligned?

  • Profile Image
    laurencarson19
    Answered on October 29, 2020 at 09:06 PM

    The photo you showed me with the save is not using the same custom CSS page as the previous message informed me to use.

  • Profile Image
    Sonnyfer
    Answered on October 29, 2020 at 10:56 PM

    Are you still working on this form https://www.jotform.com/203018266651148? It's where I captured the screenshot. As your previously injected CSS codes did not successfully save, I'd suggest reinjecting them and then press Save as mentioned in my previous reply.

    As for the Yes/No bubbles, they seem to be aligned on my end. Could you please check again? I cleared your form cache as a precaution.

    1604026484_5f9b8074b0fe4_


  • Profile Image
    laurencarson19
    Answered on October 30, 2020 at 12:48 AM

    https://www.jotform.com/build/203018266651148 Yes this is the form im working on. The screen shot you sent is not what mine is supposed to look like. I have my questions aligned the left and I wanted to know how to make the yes or no options in line. In terms of saving it is not allowing me to save the changes I make for the spacing. Would you please give me a tutorial on how to do the spacing changes and save it? and how to align the yes no answer options after making the spacing unique for each?

  • Profile Image
    laurencarson19
    Answered on October 30, 2020 at 12:50 AM

    Also the yes or no questions are showing the question above in the preview but in my editing page I have them aligned to the left and that is how it shows.

  • Profile Image
    Sonnyfer
    Answered on October 30, 2020 at 03:38 AM

    I have my questions aligned the left and I wanted to know how to make the yes or no options in line.

    Did you mean you want to display them in one line? You can unshrink them to display like this:

    1604043141_5f9bc18567e16_

    In terms of saving it is not allowing me to save the changes I make for the spacing. Would you please give me a tutorial on how to do the spacing changes and save it?  and how to align the yes no answer options after making the spacing unique for each?

    Also the yes or no questions are showing the question above in the preview but in my editing page I have them aligned to the left and that is how it shows.

    Perhaps your browser cache is preventing you from saving your form. Kindly try clearing it or use a different browser to check if it makes any difference.

    As for the spacing, did you mean the space between questions? Or the spacing between the yes and no? If possible, kindly share some screenshots to better illustrate what you're after. Here's How-to-Post-Screenshots-to-Our-Support-Forum

    We'll be waiting for your reply.


  • Profile Image
    laurencarson19
    Answered on October 30, 2020 at 11:38 PM

    Sorry I ended up changing my mind about some of the questions I had.

    Instead I was wondering if there is anyway for me to apply a font that you folks do not have listed in the options?
    Second, how can I make a second section of questions a smaller font than the first set of questions? Let me know! Thank you for your help!

  • Profile Image
    JohnRex
    Answered on October 30, 2020 at 11:55 PM

    I have moved your last two questions to separate tickets. I will address them shortly via these links below:

    https://www.jotform.com/answers/2670603

    https://www.jotform.com/answers/2670604