I'm trying to customize the button of 'Select File' using UploadiFive plugin and all works fine, but only a portion of the area of the button is able to open the Load Dialog.
Only the Upper area works. If the button has 35px height, only the upper 15px do the work. What's wrong?
CSS:
.uploadifive-button {
padding:5px 20px;
background-color:#1F87C4;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px;
border:1px solid #1A6EA1;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:14px;
text-decoration:none;
text-align:center;
margin:0 auto;
}
.uploadifive-button:hover {
background-color:#1A70A3;
border:1px solid #165E8A;
}
and Javascript:
$('#file_upload').uploadifive({
'auto' : true,
'buttonText' : 'Upload Image',
'hideButton' : true,
'wmode' : 'transparent',
'formData' : {
'timestamp' : timestamp,
'token' : salt,
'dest' : $('div#dest').html(),
'obj' : $('div#obj').html()
},
'queueID' : 'queue',
'removeCompleted' : true,
'uploadScript' : '/upload_image_objet.php',
'onUploadComplete' : function(file, data) {update(data);}
});
Finally I could guess, inspecting with Firebug, that another input tag was being placed in the DOM. So, the solution is modifying the new input style adding the new 'width' and 'height'.
it cost me many hours to discover.
I hope this can help anyone else.
Here is the code that Firebug shows:
<input id="file_upload" class="uploadifive-button" name="file_upload" type="file" style="display: none;"/>