Upload button tweaking

  • Profile Image
    m1hunter
    Asked on October 23, 2016 at 12:54 AM

    When I use my upload button to to upload files to my form I do not want the file details to be displayed under the file upload button it makes my form look uncentered when the upload button adds the details of the file that was uploaded under the button. How do I use CSS to get rid of that.  I hope you understand what I need. Thanks again for all of your help.

     

  • Profile Image
    Mike_G
    Answered on October 23, 2016 at 02:58 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.

  • Profile Image
    m1hunter
    Answered on October 23, 2016 at 10:31 AM

    Thanks that is what I needed. I have a few more things I need css code for.

    1. When the mouse hovers over the send info / images button it turns white. I need it to not turn any       color at all.

    2. I need to change the Attach image / images button to this color #B71427.

    3. I need all the text boxes (First Name,Last name Ect.) Black like the messages box.

    4. When I submit the form with the required fields not field out I get a red border around them I would     like to make this red  border thicker / wider.

    5. One more thing when I upload images to my form the Send info / images button says Please wait.....

        I would like to change that to Attaching images....

    Page URL:
    https://form.jotform.com/62938639407165 

     

    Thanks for all of your previous help.

     

     

     

  • Profile Image
    Mike_G
    Answered on October 23, 2016 at 11:35 AM

    I see that you've already opened a separate thread for all your other concerns. 

    https://www.jotform.com/answers/969149-Some-more-tweaks-css-code-needed-help-please-#0

    Please allow me some time to work on a solution for your concerns then I will get back to you as soon as possible and respond on the other thread. 

    Thank you.

  • Profile Image
    m1hunter
    Answered on October 23, 2016 at 11:43 AM

    Thank you so much.

  • Profile Image
    m1hunter
    Answered on June 27, 2017 at 10:23 AM

    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
    ashwin_d
    Answered on June 27, 2017 at 12:22 PM

    Hello,

    When you say "Could the attached images be added to the messages box", do you mean to say that you want to add the list of uploaded file in a separate box?

    Please note that it is possible to change the placement of the uploaded file name section within the form by injecting custom css code but it is not possible to show the uploaded file names in a separate message box. I would suggest you to please explain your requirement a bit more in detail and we will surely try to help you.

    We will wait for your response.

    Thank you!

  • Profile Image
    m1hunter
    Answered on June 27, 2017 at 01:09 PM

    I need the uploaded file names to be added to my form so the form does not get any bigger vertically when the files are listed.

  • Profile Image
    Kevin_G
    Answered on June 27, 2017 at 02:58 PM

    Could you please injecting this CSS code and see if that would work for you?

    ul.qq-upload-list {

        height: 37px;

        overflow-y: auto;

        margin-top: 0px !important;

        position: relative;

    }

     

     

    [data-type="control_fileupload"] {

        padding-bottom: 0px !important;

        margin-bottom: 0px !important;

        height: 80px;

        z-index:3;

    }

     

    li#id_15 {

        padding-top: 0px;

        margin-top: 0px;

        position: relative;

        margin-top: -10px; 

        z-index: 2;

        height: 60px;

    }

    This should be the result: 

    This guide will help you injecting the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Let us know how it goes on your end. 

  • Profile Image
    m1hunter
    Answered on June 27, 2017 at 04:15 PM

    Super idea thank you soooo very much you guys and gals are the best!!!! I combined this idea with this one. Now the form is perfect :).

    https://www.jotform.com/answers/1184827-Upload-button-tweaking-again-please-help-/?entrymessage=10732640770

  • Profile Image
    Kevin_G
    Answered on June 27, 2017 at 05:28 PM

    You are most welcome  m1hunter. 

    Glad to know you were able to your form like you wanted. 

    If there is anything else that we can assist you, please let us know, we will be glad to help you.