Can't align side-by-side dropdown fields with text fields in other rows

  • emagma
    Asked on September 7, 2015 at 8:33 PM

    In my form I have essentially set up 2 columns, however the rows with drop-down fields won't align with the text fields above (see screenshot). *note, "Best Time to Call" is a conditional field (must select phone in previous field).

     

    I tried a few css options, and I tried setting the width in the editor, but I can't seem to align the fields.

     

     

     

     

    Jotform Thread 656604 Screenshot
  • Elton Support Team Lead
    Replied on September 7, 2015 at 11:16 PM

    Inject this CSS codes to your form, this should fixed it.

    .form-col-1 {width: 50%;}

    .form-col-2 {width: 50%;}

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

    .form-col-1 {width: 100%;}

    .form-col-2 {width: 100%;}

    }

    Result:

    Cant align side by side dropdown fields with text fields in other rows Image 1 Screenshot 20

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form

    Hope this helps!

  • Elton Support Team Lead
    Replied on September 7, 2015 at 11:17 PM

    Place the CSS codes at the most bottom part. If you need further help, let us know. ;)

  • emagma
    Replied on September 8, 2015 at 4:00 PM

    Thanks for the quick response, however it does not seem to be working for me. I copied and pasted the CSS code at the bottom as you recommended, but nothing changed. I noticed that it looks correct in the screenshot you uploaded, so I'm wondering why it didn't work on my side.

     

    Also, I added a google recapture field to my form, and I would like to put the Submit button on the same line, but I do not seem to be able to. Do you know how I could accomplish this? The fields do not need to be lined up with the other ones, however I would like them on the same row if possible.

     

    Thanks!

  • Ben
    Replied on September 8, 2015 at 6:00 PM

    I took a look at your form and I see why it was not applied - the code was OK, but seems that your form was changed in the mean time - since it was now set to be in several columns following one another.

    What I did was to set each second field to go into the new row:

    Cant align side by side dropdown fields with text fields in other rows Image 1 Screenshot 20

    This set the fields to have .col1, .col2 and then the ones in the new row/line get the same class assigned to them as well - while before they were: .col1, .col2, .col3, .col4, ...

    After that, I just set the Submit button to be smaller by using Shrink option and that set both of the Google Captcha widget and the submit button to be in the same row.

    I made these changes on your own form, so the change is already active and you can see it by simply going to your form: http://form.jotform.us/form/52467803359160

    Do let us know how it looks for you :)

  • emagma
    Replied on September 9, 2015 at 2:12 PM

    That makes sense and seems to be just what I was looking for. Thanks so much for your help, it's amazing how small little differences can make such an improvement.

  • Ben
    Replied on September 9, 2015 at 3:16 PM

    You are welcome and I am glad that it is looking as you wanted it to :)

    I agree, but they say - life is all about the small things in it :)