css style to the specific id is not working as expected

Question

In my JSF 2 Primeface application I have following file upload component.

<p:fileUpload id="related_image" fileUploadListener="#{fileUploadController.handleFileUpload}"  
    mode="advance"  
    auto="false" 
    showButtons="false"
    sizeLimit="100000"
    fileLimit ="1"
    allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
    style="width: 310px"/>

I want to remove progress bar from this component so I am doing

.progress {
display: none;

}

and this work but I want to remove the progress bar attached to this file upload component only and not from my entire application, so I tried

#related_image .progress{
display:none;

}

but this doesnt work, any clue guys?

CSS doesn't style a JSF component but the HTML output from the server. Please paste the HTML code received by a browser — FelipeAls, Sep 29 '12 at 18:01

score 2 · Answer 1 · answered Sep 30 '12 at 11:12

Your <p:fileUpload> component can have prepended id. View the generated HTML output after deploying and check for the actual id of the component. <p:fileUpload> is in some form (or in other wrapping component e.g. <p:panel>). Primefaces automatically add forms id to components inside this form. So the actual id of <p:fileUpload> probably looks like id="formID:fileUpID" and thats why it can't find #fileUpID.

Note: You can disable prepending ids by prependId="false" attribute.

Note 2: You can also try to specify styleClass for the <p:fileUpload>, which you can style in CSS.

score 0 · Answer 2 · edited May 23 '17 at 10:24

0

First, you got an extra space in

\#related_image .progress{

the selector should be

#related_image.progress{

Second, if the fileUpload component really has prefixed id (as the Fallup suggests) you need to escape the colon from the id in the css selector - see e.g. Handling a colon in an element ID in a CSS selector for this.

edited May 23 '17 at 10:24

Community

1
1

answered Sep 30 '12 at 19:22

jarek.jpa

565
1
5
18

score 0 · Answer 3 · edited May 23 '17 at 12:26

in general (in css you need to escape the colon with \3a Handling a colon in an element ID in a CSS selector , while in jquery you should use \\:)

#some_prefix_id\3a your_file_upload_component_id .someClass{
    display:none;
}

where the some_prefix_id might be some form id or some naming container id ,

Although , INMO a better approach would be assigning an id to your form and using this selector in css :

#your_form_id .someClass{
    display:none;
}

css style to the specific id is not working as expected

3 Answers3