JSF :: Styling Primefaces Elements With CSS File

Nov 19, 2014

Currently I am having difficulties styling a particular prime faces element in a JSF application for work. I'm tasked with giving the ui a styling and color scheme acceptable to our project design. However I am finding myself unable to "hook" a particular pf element with an ID so that I can proceed with styling a imported .css file.

I'm trying to style the commandLink button to display in Orange 20px font with Italic but when I inspect the element in chrome after being rendered It doesn't even show its style linked to the assigned ID. The class style for mainMenuItem is being applied to the commandlink but is immediately over written by ui-widget. I'm trying to style that one single component(override/replace ui-widget with the properties in the #loggedInUserID)

Current .XHTML code and the css file has been linked with

<h:outputStylesheet library="css" name="masterPW.css"/>
<div class="mainMenuItem"><p:commandLink id="loggedInUserId" styleClass="maserPW.css" value="#{loginController.userFullName}"/>
</div>

[Code] ....

View Replies

JSF :: Styling PrimeFaces File Upload Tag

Mar 22, 2014

I'm having some problems styling the PrimeFaces upload tag <p:fileUpload /> in my application.

In my xhtml code I have the following:

<p:fileUpload id="fileUpload" fileUploadListener="#{filters.upload}"
allowTypes="#{filters.uploadTypes}" invalidFileMessage="#{filters.uploadBadType}"
sizeLimit="#{filters.uploadSize}" invalidSizeMessag="#{filters.uploadBadSize}"
update="fileUpload fileTable filterTab uploadMessage hiddenNum hiddenPhoto uploadError footer
namePhotSystem checkOverwrite"
description="Select Text File" disabled="#{filters.fileuploadDisabled}" fileLimit="1"
fileLimitMessage="You are only allowed to upload one file at a time"
styleClass="fileUploadClass" label="Choose the File to Upload" auto="true" />

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:

.ui-fileupload.fileUploadClass {width:428px;}
.ui-icon-plusthick {display:none;}
.ui-button-text {width:200px; height:20px;}

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.