Upload button tweaking again please help!!

  • m1hunter
    Asked on June 27, 2017 at 10:40 AM

    To hide the list of items that were uploaded, please add the CSS codes below.

    ul.qq-upload-list {

        display: none !important;

    }

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    I hope this helps. However, please be reminded that the list serves as a way to let your respondents know what was already uploaded and if it was successfully uploaded.

    If you need any further assistance, please feel free to contact us anytime. Thank you.

     

    The above CSS code worked great but a couple of my customers are not sure if their images are sent.

    I added this code so my forms would not change size when the attaches images were listed.

    Could the attached images be added to the messages box or something like that so when the images

    my customers upload get listed it does not make my form taller. Pic below to show you what I mean.

    The form: https://form.jotform.us/63266119691158

     

    My website: http://www.americanpatchandpin.com

     

     

     

     

     

    Jotform Thread 1184827 Screenshot
  • Nik_C
    Replied on June 27, 2017 at 12:46 PM

    I understand what you mean, but I'm not sure what would be the best option for you if we make the height of the list smaller, your users will not see the uploaded files, if we make it fixed in height, which is similar, but it shouldn't expand, again we have the issue with visibility of the uploads.

    Do you know, on an average basis, how many uploads per submission you have?

    I'm trying to make something like this: 

    Upload button tweaking again please help!! Image 1 Screenshot 20

    To make the listed files smaller so they could fit better.

    We'll wait for your response.

    Thank you!

  • m1hunter
    Replied on June 27, 2017 at 1:05 PM

    They upload on average 2 but sometimes 4. Could you do a fixed height and put 2 images per line? The name of the image would be enough we do not need the size maybe we could eliminate the size as well to save space.

  • BJoanna
    Replied on June 27, 2017 at 2:34 PM

    Please add this CSS code to your form:

    li.qq-upload-success {

        width: 150px;

        float: left;

        margin: 1px!important;

        padding: 1px!important;

    }

    How to Inject Custom CSS Codes

    When you add mentioned CSS code, your form should look like this when 2 files and 4 files are uploaded. 

    Upload button tweaking again please help!! Image 1 Screenshot 30

    Upload button tweaking again please help!! Image 2 Screenshot 41

    Here is my demo form: https://form.jotformpro.com/71775223985972 

    Feel free to test it and clone it

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

  • m1hunter
    Replied on June 27, 2017 at 4:11 PM

    Good idea I combined it with this idea now the form is perfect. Thank you soooo much!!!!

     

    https://www.jotform.com/answers/969056-Upload-button-tweaking#8