Issue with custom button for <rich:fileUpload> component

The project I am working on is currently using richfaces 3.3.3. I have disabled all buttons except for the "Add" button, or in our case, we have called it "Browse" and used the addControlLabel for that.

<rich:fileUpload fileUploadListener="#{fileUploadBean.listener}" maxFilesQuantity="#{fileUploadBean.uploadsAvailable}"
    addControlLabel="Browse" immediateUpload="#{fileUploadBean.autoUpload}" listHeight="0" listWidth="auto"
    allowFlash="#{fileUploadBean.useFlash}" styleClass="float-left">
    <a4j:support event="onuploadcomplete" reRender="mainMsgPanel,upload,homeTable,errorPanelImage,panelErrorMessage,imageSuccessMessage"  />
    <a4j:support event="onsizerejected" reRender="mainMsgPanel,upload,homeTable,uploadMessage,panelErrorMessage,imageSuccessMessage,errorPanelImage"
        action="#{fileUploadBean.uploadRejected}" />

Once a file is selected and "Open" button is pressed from the "File Upload" dialog window, the file will automatically upload the selected file. The problem is that once the "Open" button is pressed, the image for the button is pushed down, pretty much the full height of the button itself, but the "Browse" text is pushed to the right and the color of the text changes from white to black.

I have screenshots, but I can't post them here yet, so, here are links to my public Dropbox that contains each image.

This screenshot is what it should look like, prior to any file being uploaded:

This screenshot is what it looks like just after selecting the file and pressing the "Open" button in the "File Upload" dialog window:

Once it finishes the upload, the UI goes back to the correct layout as shown in the first screenshot.

Here is my CSS for the button and most of the RichFaces classes that are generated when component is rendered:

.rich-fileupload-toolbar-decor {
    border: none;

.rich-fileupload-list-decor {
    border: none;

.rich-fileupload-button-border {
    border: none;
    margin: 0;
    width: 100%;

.rich-fileupload-ico-add {
    background-image: none;
    padding: 2px 0 0 0;

.rich-fileupload-ico-clear {
    display: none;
    background-image: none;

.rich-fileupload-ico {
    padding: 2px 0 0 0;
    background-image: none;

.rich-fileupload-button-press {
    border: none;
    position: relative;
    color: white;
    text-decoration: none;
    padding: 0;
    width: 93px;
    height: 24px;
    cursor: pointer;
    background-image: none;
    background: url("/img/layout/button_browe-blue-93x24.png") no-repeat;

.rich-fileupload-button-content {
    padding: 4px 0;
    text-align: center;
    text-shadow: 1px 1px #000;

I am lost as to what could be causing this to happen. Does anyone have any thoughts, comments, suggestions? Anything would help. Thanks


Need Your Help

Selecting value in matrix together with column name in R


I have a matrix from which I would like to select an observation together with its column name.

Windows authentication using AD group in WebApi not working windows-authentication

I have a developed a Restful webservice using WebAPI and used the windows authentication in the web.config file. This WebService is called by inhouse windows application in the internal net...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.