Hello,
I'm having some problems styling the PrimeFaces upload tag <p:fileUpload /> in my application.
In my xhtml code I have the following:
This all works correctly, both the AJAX update and on the server, but I'm unable to get the button or buttons displayed in the way I need.
By including the following in my CSS:
the first sets the width of the button bar, and by looking at the HTML code generated by PrimeFaces, I discovered that the second hides the "+" to the left of the "Choose" button, which here has been replaced by the text "Choose the File to Upload". However, this text is displayed on two lines, with the
word "Upload" on the second. I want the whole text to be on one line, but no matter what I do, I cannot get this to work properly. The third line of my CSS code does indeed reduce the height of the button, but the width does not work at all, and the last part of the text is simply lost. How do I put all the text on one line and adjust the width of the button?
Another question is that when I remove the auto="true" attribute from the tag, which I had originally, the "Upload" button is displayed to the right of the "Choose" button, and when a file is chosen but not yet uploaded, it is displayed below the button. This is a capability that I might still want, however, I am unable to style the display, and in particular the progress window to the right of the file name and size. All the files I want to upload are relatively small text files, and I want to adjust this window or even hide it completely. How is this done?
Incidentally, because the files are all quite small, I have disabled the display of the "Cancel" button, so either only the "Choose" button is shown, or the "Choose" and "upload" buttons.
I would most appreciate in getting these questions resolved, in particular the first one.