Make a two column form thats lined up correctly on desktop and mobile

  • Profile Image
    Molsen66
    Asked on October 17, 2017 at 09:57 PM

    Hi there,

    I have made a two column form for my local football club so we can track players statistics but I'm having trouble lining up the columns so it looks neater on the desktop mode and doesn't revert to single columns on mobile.

    Is there a way to put the "home teams" stats to be left aligned and the "Away Teams" stats right aligned? At the minute each item is aligning differently. 

    If that is possible is there a way to make sure these fields will stay that way on the mobile version as well?

    I have attached my form so you can see it more clearly.

     

    Cheers,

     

    Marty

     

  • Profile Image
    BJoanna
    Answered on October 18, 2017 at 04:29 AM

    You can add this CSS code to your form to potion the fields in two columns:

    @media screen and (min-width: 10px) and (max-width: 480px){

       .form-line.form-line-column {

        width : 140px!important;

    }

    }

    How to Inject Custom CSS Codes

    1508315082demo.JPG

    Here is my demo form: https://form.jotform.com/72902286953969 

    Feel free to test it and clone it.

    I would also suggest you to check our Input Table field.

    1508315312input table.JPG

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

  • Profile Image
    Molsen66
    Answered on October 18, 2017 at 05:43 AM
    Thanks a lot.
    Is there anyway to make sure they are aligned neatly in the desktop version
    like the mobile version is now?
    I tried an input table but didn't like the style of it.
    Cheers,
    Marty
    ...
  • Profile Image
    BJoanna
    Answered on October 18, 2017 at 07:03 AM

    I saw that you changed the Theme of your form. On the desktop there is only the issue with one 'Contested Possessions' field.

    1508323956desktop.JPG

    To resolve this issue set the Label Aling of that field to Left.

    1508324068left.JPG

    You can also set the Label Align of all fields to TOP. 

    1508324250top.JPG

    Here is my new from: https://form.jotform.com/72903348753967 

    Let us know if you need further assistance. 

  • Profile Image
    Molsen66
    Answered on October 19, 2017 at 08:43 PM
    Hey Bjoanna,
    I have updated my theme and formatted my form so it works in desktop and
    mobile perfectly except for the 3 drop down options.
    "Home Team" and "Away Team" drop downs are next to each other neatly in the
    mobile version but when in desktop mode they don't expand wide enough to
    sit next to each other neatly filling the extra space.
    The final drop down at the bottom of the form which is on its own line
    expands full length horizontally in mobile but shrinks in all other formats
    like desktop.
    What css code do I need to input so all the drop downs expand properly
    outside of mobile mode?
    Cheers,
    Marty
    ...
  • Profile Image
    Nik_C
    Answered on October 20, 2017 at 03:14 AM

    I'm afraid I wasn't able to make it work with CSS, apparently, the theme used in the form is overriding it so the drop-down width stays the same, actually its max-width parameter.

    So with the theme applied, I'm not sure if it is possible to achieve that. It is a simple CSS, but on preview, the CSS of the theme overrides it.

  • Profile Image
    Molsen66
    Answered on October 20, 2017 at 03:43 AM
    So if I change the theme and that will fix the problem?
    What CSS will I have to use on a new theme to make sure it's working correctly.
    Sent from my iPhone
    ...
  • Profile Image
    ashwin_d
    Answered on October 20, 2017 at 07:04 AM

    I would suggest you to please apply a new desired theme and then based on that we will help you with the required custom css code to achieve your requirement.

    We will wait for your response.

  • Profile Image
    Molsen66
    Answered on October 21, 2017 at 12:43 AM
    Hi there,
    I have updated to another theme and that has fixed my dropdown width issue.
    Now when I select any of the input boxes on the right hand side of the form
    they push the other boxes below them down one.
    How do I enable them so when I choose a number box or dropdown not to
    automatically move the other number boxes around?
    Cheers,
    Marty
    ...
  • Profile Image
    ashwin_d
    Answered on October 21, 2017 at 02:27 AM

    I have cloned your form and working on it but it is taking a bit of time. I will get back to you on this soon.

  • Profile Image
    ashwin_d
    Answered on October 21, 2017 at 02:35 AM

    Please take a look at the following cloned form and see if this works as expected:  https://form.jotform.com/72931197039967

    I have moved the first column fields to a new line and that seems to have solved this issue. Please check the screenshot below:

    1508567671newlinew.gif

    Hope this helps.

    Do get back to us if you need any other changes.

  • Profile Image
    Molsen66
    Answered on October 21, 2017 at 03:43 AM
    Thanks that seems to have fixed the issue.
    ...
  • Profile Image
    ashwin_d
    Answered on October 25, 2017 at 12:15 AM

    Please inject the following custom css code inform and that should fix the issue you are having with mobile devices:

    @media only screen and (max-device-width: 480px) {

    .form-line.form-line-column {

        width: 50% !important;

    }

    .form-line-column.form-col-1 {

        width: 50% !important;

    }

    }

    The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

  • Profile Image
    Molsen66
    Answered on October 25, 2017 at 03:11 AM
    Thanks a lot
    ...