Alignment of Elements Within 2 Column Form

  • Profile Image
    nealbryant
    Asked on January 21, 2018 at 05:12 PM

    I'm in the process of creating a two column form, but am currently unable to align the elements with the others in the same column. It's like a different amount of margin is being applied. How can I force the elements to align with the other elements within that column? 

    Feel like i'm missing something simple. 

  • Profile Image
    liyam
    Answered on January 21, 2018 at 10:02 PM

    We can assist you for setting the position of your fields. But for now, I would like to know how you would like your fields to be placed.

    We'll look forward to your response.

  • Profile Image
    Neal Bryant
    Answered on January 22, 2018 at 01:55 PM

    Thanks for coming back to me Liyam. I am happy with the alignment of the top two fields (i.e top line of fields), and would like the fields below to follow that alignment for the entire column eg. email field is left aligned with the field above.

    I am going to add more columns, but thought it made sense to tackle this first. 

    Thanks in advance for your help.

  • Profile Image
    Mike_G
    Answered on January 22, 2018 at 02:47 PM

    Thank you for the additional information.

    If you want to force shrunk fields to appear on the left side of the form, I suggest that you enable the "Move to a new line" option of those fields.

    1516650250t14_34_52.png

    The fields that you want to appear on the right side of the form should have that option disabled.

    Here's also a guide that you may use as a reference — Setting-up-Form-Columns

    If you have other questions, please do not hesitate to let us know.

  • Profile Image
    nealbryant
    Answered on January 22, 2018 at 03:19 PM

    Hi Mike,

    Thanks for the response, although I think I may not have been clear in my previous response. I'm looking to left align the fields within their columns, keeping the two column format. The "move to a new line" seems to left align all of the fields effectively moving them all into one left column.

    I've added a screenshot below in which the red lines depict how I would like the fields to be aligned. 


    1516652206Screen Shot 2018-01-22 at 20.1

  • Profile Image
    aubreybourke
    Answered on January 22, 2018 at 04:35 PM

    Try this code:

    .form-line.form-line-column.form-col-3 {

        margin-left : -15px !important;

    }

    .form-line.form-line-column.form-col-5 {

        margin-left : 70px !important;

    }

    .form-line.form-line-column.form-col-4 {

        margin-left : 20px !important;

        width : 240px !important;

    }

    And it should look like this:

    1516656877The Easiest Online Form Builde

    Note: I also turned the spread to columns for the radio buttons off.

  • Profile Image
    nealbryant
    Answered on January 22, 2018 at 05:20 PM

    Thanks aubreybourke.

    Does that mean i'm going to have to add custom padding for each field as I progress down the page? I'm planning on adding 20+ fields to each column, so would be good to find a consistent approach. Is there no way of making them 'snap' to the same point? Will this also work when you take responsive into account? 

  • Profile Image
    Kevin_G
    Answered on January 22, 2018 at 08:04 PM

    Yes, with the code my colleague provided you would need to add a single piece of code per field; however, with this one you will affect all the fields displaying in columns at the same time:

    .form-line-column{

        padding-left: 15px !important;

    }

    Please note that you will need to remove all the existing CSS code on your form in order to have this code working. 

    On mobile devices, the fields will display on block, they cannot be displayed inline since that will be a bit distorted layout. 

    I hope this helps. 

  • Profile Image
    nealbryant
    Answered on February 19, 2018 at 05:33 PM

    Hi Kevin, 

    Thanks for your help i've finally got around to fixing the columns and am now happy with how it's all looking. 

    When the data is recorded (and delivered in the submission) I would like the fields within column 1 to somehow be identifiable as from that column and the same for column 2. Is that possible? 

    1519079457Screen Shot 2018-02-19 at 22.3


    At the moment we are recording similarly labelled data within both columns so it's difficult to distinguish which is which when the submissions comes through. i.e. name is recorded in both columns (one field relates to the individual and one to a partner/relative). 

    This is only relevant at the top of the form.

    Thanks in advance for your help. 

    Neal 


  • Profile Image
    Kevin_G
    Answered on February 19, 2018 at 06:38 PM

    Since your last question is not related to the original one asked  here, I have moved it to  another thread, we will assist you as soon as possible here: https://www.jotform.com/answers/1389664- 

    Thanks.