File upload stops working after applying custom CSS

  • Profile Image
    tamsyn
    Asked on March 28, 2016 at 11:03 AM

    Hello there!

    I seem to be having an issue with the file upload widget. I applied custom CSS to it to format the look so it better matches our brand style. But that CSS code appears to break the functionality of the button.

    I have tried temporarily disabling the custom code (using /* ... */ around the code I wanted to disable), and when I retested the form, the button works. Upon re-enabling the custom code and re-testing, the button no longer works.

    I read that some other users have found that having a page break right after the file upload button has seemed to cause the button to stop working -- but that does NOT appear to be the case for me.

    The specific button ID is #cid_75 in my form "2016 Field Day Bio and Media Form." Here is the code I have disabled:

    #cid_75 div.qq-upload-button {

        /*border : 2px solid !important;

        border-color : #9d3c22 !important;

        margin-left : 150px !important;

        margin-right : -150px !important;

        font-family : "Chaparral Pro", "myriad pro", Open Sans !important;

        font-size : 18px !important;

        font-weight : bolder !important;

        background : #f6b983 !important;

        color : #9d3c22 !important;

        text-shadow : none !important;

        */;

     

    There is also similar code for upload buttons more generally:

    .qq-upload-button.undefined {

        background : #f6b983;

        margin-left : 150px;

        margin-right : -150px;

        font-family : "Chaparral Pro",Open Sans;

        font-size : 18px;

        text-shadow : none;

        color : #9d3c22;

        border : 2px solid;

        border-color : #9d3c22;

        font-weight : bolder;

        

    }

    I have NOT disabled that code, and the button still seems to work (though it doesn't have my specific formatting applied).

    Thanks for any help you can provide!

    tamsyn

  • Profile Image
    Kiran
    Answered on March 28, 2016 at 12:21 PM

    This is due to the Input container hasn't been moved along with the button. Please add the following CSS code to your JotForm so that it should be working fine.

    div.qq-uploader > div.inputContainer {

        top: 2px;

        left: 150px;

    }

    Hope this information helps! Please get back to us if you need any further assistance. We will be happy to help.