Line up fields into 2 columns

  • Profile Image
    ReLivePT
    Asked on June 29, 2020 at 05:38 PM

    Hi-

    I am trying to line up 2 fields side by side. Left column will be the photo capture widget and the second column would have the file upload. The problem I'm experiencing is an impossible game of Tetris. Some fields line up correctly and some will not allow me to move to the correct row and/or wrong side.

    Please help! Thanks!

  • Profile Image
    JohnRex
    Answered on June 29, 2020 at 09:06 PM

    You can resolve the issue by enabling the "MOVE TO NEW LINE" option of the preceding field.

    Here's how: http://tiny.cc/qodkrz 

    GUIDEForm-Field-Positioning 

  • Profile Image
    ReLivePT
    Answered on June 29, 2020 at 10:42 PM

    Hello-

    That didn't help, but I did learn that the file upload widget allows to take a photo from mobile device. So, that will do the job.

    If you can help with one more item regarding this format, how can I make the two columns mobile responsive? I'm guess it's some CSS injection?

    Thanks for your help on this.

  • Profile Image
    Vick_W
    Answered on June 30, 2020 at 01:10 AM

    Hey there,

    Happy to help you today.

    Can you please send a screenshot of the columns you are referring to so we can check this for you?

    Here is how you can attach a screenshot on our support forum

    https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum

    Looking forward to your reply.

    Thanks.

  • Profile Image
    ReLivePT
    Answered on June 30, 2020 at 11:25 AM

    Hi-

    (1) Here is the screen shot of the form. I would like to make mobile optimized to have same 2 columns. The form url: https://hipaa.jotform.com/ReLivePT/relive-pt-documents-uploader

    (2) Additional question; I upload buttons have a shadow/outline around text. I went into advanced designer and unable to modify the stye/appearance. Can you help so it's just normal style text without the outline?

    Thank you very much!1593530623Jotform Document Form Columns.

  • Profile Image
    Bojan_J
    Answered on June 30, 2020 at 12:33 PM

    Greetings and thank you for your message.

    Please allow us some time to prepare the CSS for you. As soon as we have more information for you, we will let you know.

    Thank you for your patience. 

  • Profile Image
    Bojan_J
    Answered on June 30, 2020 at 12:41 PM

    Greetings and thank you for your patience.

    Please add the following CSS code to your form:

    @media only screen and (max-width: 600px) {
      .form-line[data-type="control_fileupload"] {
        display: block;
        width: 100%;
      }
    }
    .qq-upload-button {
      text-shadow: none;
    }

    It should show upload buttons in one row on phones, and it will disable all shadows. You can click here to see how to inject CSS into your form.

    Let us know if this solution works for you. 

  • Profile Image
    ReLivePT
    Answered on June 30, 2020 at 01:38 PM

    Thanks for the response. The shadow has been eliminated - perfect! :)

    I am still experiencing the upload fields on separate rows on my mobile device as well as when previewing form as "phone" option. Screen shot attached.

    1593538699Screenshot_20200630-123354_Chr

  • Profile Image
    JohnRex
    Answered on June 30, 2020 at 02:55 PM

    Please try adding this custom CSS code to your form:

    .qq-upload-button {

        width: 130px!important;

    }

    id_91, #id_89, #id_92 {

        float: right;

        margin-top: -109px;

        margin-right: -185px;

    }

    #label_89, #label_90, #label_87,#label_87,#label_85,#label_91,#label_93  {

        font-size: 11.5px!important;

    }

    This is how it will look like:

    15935433212419328 2.png