Upload button tweaking again please help!!

  • Profile Image
    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

     

     

     

     

     

  • Profile Image
    Nik_C
    Answered 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: 

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

    We'll wait for your response.

    Thank you!

  • Profile Image
    m1hunter
    Answered on June 27, 2017 at 01: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.

  • Profile Image
    BJoanna
    Answered on June 27, 2017 at 02: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. 

    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. 

  • Profile Image
    m1hunter
    Answered on June 27, 2017 at 04: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