How to display fields inline?

  • Profile Image
    ExhibitionGirls
    Asked on April 04, 2017 at 06:48 PM
    Sorry if im being stupid - how do i make the boxes sit next to each other on one line after shrinking?
  • Profile Image
    Kevin_G
    Answered on April 04, 2017 at 06:51 PM

    You need to shrink all the fields you need to display inline, once you start doing this you will notice they will get their width reduced and the next field will be moved to the above line (if the field above as well as the field in the next line have the shrink option enabled).

    Here's a guide that will also help you with displaying fields inline: https://www.jotform.com/help/90-Form-Field-Positioning 

    It may also require to change the field's width, you could do it through the field properties and finding the width under the options tab: 

    Hope this helps. 

  • Profile Image
    ExhibitionGirls
    Answered on April 05, 2017 at 04:52 AM

    Hi is there an easy way of duplicating the content? also there are problems with alignment :/ attached 

  • Profile Image
    Nik_C
    Answered on April 05, 2017 at 06:14 AM

    Could you provide more information about the image, what exactly are those fields?

    You should be able to create them with our basic fields:

    We'll wait for your response.

    Thank you!

  • Profile Image
    ExhibitionGirls
    Answered on April 05, 2017 at 06:24 AM

    Hi ive attached what i am trying to do 

     

  • Profile Image
    Jim_R
    Answered on April 05, 2017 at 08:40 AM

    Hello, I'm seeing this was explained by my colleagues so perhaps using a short clip will let us explain it better:

    Here's the demo form: https://www.jotform.com/70943150538961

    I strongly urge you to read and refer to the guide that was given previously. For your convenience, I'll list it here again along with another guide that might help.

    Related guides:

    Form-Field-Positioning

    Setting-up-Form-Columns

  • Profile Image
    ExhibitionGirls
    Answered on April 20, 2017 at 07:59 AM

    Thank you - how do i get the following onto one line please?

  • Profile Image
    Sven
    Answered on April 20, 2017 at 08:52 AM

    Just to clarify, do you need the label "Company Name" and the field to be on the same line? If yes, you can do that by clicking on the gear icon to open the PROPERTIES menu, then from the GENERAL tab, find LABEL ALIGN, and change the option to Left instead of Top.

     

    If this is not what you're looking for, please explain what you want to achieve so we can assist you further.

     

    Thank you.

  • Profile Image
    ExhibitionGirls
    Answered on April 20, 2017 at 02:38 PM

    Thank you - sorry im having problems with the 

    staff - mobile number - dress size again 

    i have to pre fill this information for clients but when i put it into the pre fill form the formatting goes wrong 

    It needs to be in one line

    I have attached a screen grab 

     

  • Profile Image
    ExhibitionGirls
    Answered on April 20, 2017 at 02:39 PM

    also im having problems with formatting on the rest of the form - screen grab attached

  • Profile Image
    Jim_R
    Answered on April 20, 2017 at 03:58 PM

    Hello 😊 no need to apologize, we're here to help you. For your post about the staff - mobile number - dress size fields, I assume you want all 3 of them shown in 1 line?

    This will not work with your form because your form width is too narrow. The only way to cramp 3 fields in 1 line is to:

    1. Either make the fields smaller

    2. Or the easy way, make your form wider

    The general rule of thumb is to ensure you have ample amount of space for the fields to align themselves in 1 line.

    To move the Staff Booked - 2 field to a new line, just toggle that option on that same section where you shrank the field.

    Here's a cloned copy of your form showing these changes: https://www.jotform.com/71095995138973

    For your other question, we can help you better if you'd be more specific on which formatting you need help with. And if possible, we kindly request you to create a new thread by clicking this link with a more detailed description on what formatting needs to be changed on your form.

    Alternatively, I strongly urge you to refer to the guides I previously posted. For your convenience, I'll list them again below:

    Form-Field-Positioning

    Setting-up-Form-Columns

    Although the 2nd guide above is about Form Columns, it's still a good read when it comes to using the Shrink and Move to a new line options.

  • Profile Image
    ExhibitionGirls
    Answered on April 20, 2017 at 05:41 PM

    Hi thank you i changed the width but its when i convert it via the pre populate app that it goes weird 

  • Profile Image
    Kevin_G
    Answered on April 20, 2017 at 07:05 PM

    I have checked your form in the pre-populate app and I can see it displays fine, here's a screenshot about what I can see: 

    Seems like you were able to resolve the layout issue, could you please confirm us that? 

     

  • Profile Image
    ExhibitionGirls
    Answered on April 21, 2017 at 03:23 AM

    hi i am seeing something different 

    i am viewing the pre populate app through http://prepopulate.jotform.io/ is that correct?

  • Profile Image
    Sven
    Answered on April 21, 2017 at 04:47 AM

    I cloned your form, and I can see that the Staff Booked -2 field is displaying a bit off, like the screenshot you provided. To fix this, please select Move to a new line, from the advanced tab in the field properties, Below is a live demonstration:

     

     

    Once you've applied this, your form will view properly in the pre populate app as well. 

     

    Here's my cloned version of your form, you can clone it back and review it via this URL:

    https://form.jotformpro.com/71102212431940

     

    Here's how to clone an existing form into your account:

    How-to-Clone-an-Existing-Form-from-a-URL

     

    Thank you.