My upload boxes not aligned. How do I align my upload section items?

  • minemetitiri
    Asked on December 15, 2015 at 5:07 PM

    I have an online application form that I have created that requires some document uploads.

    When I view the form on the web, the upload boxes are out of line. The one that is out of line has a condition attached to it, it this the cause?

    The box only appears when 'YES' is selected for IRB approval.

    How can I fix this so that it is all aligned when all of the uploads are in view?

     

    Thanks

    Jotform Thread 726147 Screenshot
  • jonathan
    Replied on December 15, 2015 at 6:40 PM

    Please change the Label Align property to LEFT for all the Upload field so that they will be all in uniform alignment.

    My upload boxes not aligned Screenshot 20

     

    Hope this help. Please let us know if you need further help.

     

  • minemetitiri
    Replied on December 15, 2015 at 10:40 PM

    Hi,

    I tried this before and it didn't work. I just tried again and it didn't fixed the issue.

    I noticed that the issue is somehow related to the subtext that I have for that particular item. The rest of the upload options don't have any subtext. When I removed it, it was aligned fine with the others, when I added the subtext back it reverted back to the issue, even after adjusting all the fields manually to left alignment.

    I want the browse box to be next to the 'Data Access Letter' heading as it is for the 'Upload CV' heading in the computer/device view on the web.

    Thanks for taking the time to help me.

  • beril JotForm UI Developer
    Replied on December 16, 2015 at 4:31 AM

    Please accept our sincere apologies regarding this problem. You are right. The issue is related with sub label because it is too long.

    My upload boxes not aligned Screenshot 30

    If you test it with smaller sub label. it will work properly.

    Here is how it works:

    My upload boxes not aligned Screenshot 41

  • minemetitiri
    Replied on December 18, 2015 at 1:08 PM

    Thanks. Unfortunately I can't shorten the description. I did a work around and made it a floating description instead. Thanks for your help

     

     

  • Charlie
    Replied on December 18, 2015 at 2:34 PM

    Is this how you would like it to appear? Here's my cloned form with that change: https://form.jotform.com/53515233449960 

    My upload boxes not aligned Screenshot 40

     

    The long sub label at the bottom of the upload field is adjusted, however, please note that this will still adjust depending on the display screen size to where the form is being viewed.

    Notice below that I am adjusting the width of my screen and the layout also make adjustments, this is to make it more mobile responsive.

    My upload boxes not aligned Screenshot 51

     

     

    If that's how you would like the sub label to adjust, please use this custom CSS code instead, but make sure that you have added the long sub label in your "Data Access Letter" upload field:

    #cid_8 {

        width: 50% !important;

    }

    Paste the custom CSS code under the CSS tab in your Form Designer Tool. Please make sure that there are no CSS errors in your existing codes.

    My upload boxes not aligned Screenshot 62

     

     

    However, I'm not sure if that's the correct code because the cloned form that I have does not have a sub label, instead it has the hover text.

    Please let us know if this is what you were looking for. You can also clone my form to have a copy of it in your account by following this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL