Style of File Upload button changes when enabling Allow Multiple option

  • Profile Image
    d_lane
    Asked on May 29, 2016 at 04:02 AM

    ok great that solved my issue. My next issue arises when I change the allow multiple files to yes. It makes my button swell to triple the size of the original. Weird. Any help here?

    before and after the allow multiple file uploads

     

    does that automatically.. (??)

    and then this happens to the upload button when I edit the button in the designer.

  • Profile Image
    Boris
    Answered on May 29, 2016 at 04:05 AM

    When using the Allow Multiple option on a file upload button, the button will start following the same styling as the Submit button of your form. This is because a traditional (HTML) button for uploading files uses styling from your browser, and can only accept a single file to be uploaded.

    In order to allow multiple files to be uploaded, we have implemented our own mechanism which is not a traditional (HTML) file upload, and can therefore accept multiple files. Our custom implementation also follows the styling for the Submit and Print buttons of your form, which is why the button will appear to "swell" when using Allow Multiple option.

    Is there a specific styling you wanted to apply to the file upload field when it is in Allow Multiple mode?

  • Profile Image
    d_lane
    Answered on May 29, 2016 at 09:55 AM

    yes like the basic one showed in this picture.

  • Profile Image
    Jan
    Answered on May 29, 2016 at 11:54 AM

    Please use this custom CSS code: 

    .qq-upload-button {
    padding: 2px 6px !important;
    border : 1px solid #ccc  !important;
    color : #666  !important;
    text-shadow : 0 1px #fff  !important;
    cursor : pointer  !important;
    -moz-border-radius : 3px 3px  !important;
    -webkit-border-radius : 3px 3px  !important;
    border-radius : 3px 3px  !important;
    -moz-box-shadow : 0 1px #fff inset, 0 1px #ddd  !important;
    -webkit-box-shadow : 0 1px #fff inset, 0 1px #ddd  !important;
    box-shadow : 0 1px #fff inset, 0 1px #ddd  !important;
    background : #f5f5f5  !important;
    background : -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%) !important;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)) !important;
    background : -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%) !important;
    background : -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%) !important;
    background : -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%) !important;
    background : linear-gradient(top, #f5f5f5 0%,#eeeeee 100%) !important;
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ) !important;
    }

    Here's a guide on how to inject custom CSS on the form. The upload button for allow multiple option should look like this:

    Hope that helps. Thank you.

  • Profile Image
    d_lane
    Answered on May 29, 2016 at 12:16 PM

    Ok it changed somewhat but I want it to look just like the original button in pic 2. Also the bottom button is still not right.

     

  • Profile Image
    Jan
    Answered on May 29, 2016 at 12:42 PM

    You need to add this CSS declaration inside the .qq-upload-button {...}.

    width : 70px !important;
    font: 13.3333px Arial !important;

    After that, go to the properties of the upload field and change the button text.

    Here's the result:

    What would you want the bottom upload button to look like?

  • Profile Image
    d_lane
    Answered on May 29, 2016 at 12:47 PM

    I want the smooth rounded corners, I want the text and button to be slimmer.

     

  • Profile Image
    d_lane
    Answered on May 29, 2016 at 01:23 PM

    and no matter what code i inject it still shows as the grey boxy upload button in my web browser. Please advise exactly where to inject the code you send.

  • Profile Image
    Jan
    Answered on May 29, 2016 at 01:31 PM

    Is this the form you're referring to? (https://www.jotform.us/form/61433506389156)

    Would you like me to log in to your account and insert that CSS code on the form?

  • Profile Image
    d_lane
    Answered on May 29, 2016 at 01:35 PM

    please I would rather have the simple instructions so that in the future I will know how to get it done.

  • Profile Image
    Mike_G
    Answered on May 29, 2016 at 03:41 PM

    Here's how you can make the button of the upload button with "Allow Multiple" option enabled somehow similar with the upload button that can only upload one file at a time.

    You need to add the following CSS codes below to your form.

    .qq-upload-button {

        background-color: #E4E4E4 !important;

        border-radius: 2px !important;

        width: 86px !important;

        height: 6px !important;

        border-width: 2px;

        border: 1px solid #A2A2A2;

        text-align: center !important;

        background-color: buttonface;

        box-sizing: border-box;

        padding: 2px 5px 17px 7px !important;

        font: 1.09em Arial !important;

        letter-spacing: 0.1px !important;

    }

    You may also refer to this guide to learn how to inject Custom CSS codes to your form.

    How-to-Inject-Custom-CSS-Codes

    Also, change the Button Text of the button in its Properties once the "Allow Multiple" option is enabled.

    I hope this helps. Let us know if you need any further assistance. Thank you.