• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Styling tghe PrimeFaces File Upload tag

 
Ranch Hand
Posts: 159
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Christopher Sharp
Ranch Hand
Posts: 159
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Sorry for the typo in the title. How do I correct that?
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic