File upload stops working after applying custom CSS

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

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.