I have a selectOneMenu with a styleclass.
Can someone write me how to style the items inside?
I'm trying to access them via styleclass.
I can change the stylings general by doing
.ui-selectonemenu-items-wrapper {font-size:13px;}
however it doesn't work via a styleClass which I have added to the selectOneMenu
<p:selectOneMenu styleClass="someClass"...
It wont work like this:
.someClass .ui-selectonemenu-items-wrapper {
font-size:13px;}
Related
I'm looking for a solution for my problem. I'm using a PrimeNG tree for an aside menu. When I click a button in screen to navigate, tree is rebuilded with new options. However, in the first menu, if I search an option with the filter of a p-tree, filter works fine, but, if I navigate, filter keeps input text, and options in the second menu are not showed till I clean the input filter.
¿Is there a possibility to clean the filter automatically?
I attach images for more details.
Expected behaviour:
Current behaviour
The HTML code is:
<p-tree [value]="files3" [filter]="true" filterMode="strict" selectionMode="single" scrollHeight="200px"></p-tree>
Thanks
I answer my onw question
It's necesary to give id to html element and execute function Tree resetFilter()
HTML code:
<p-tree #tree [value]="files3" [filter]="true" filterMode="strict" selectionMode="single" scrollHeight="200px"></p-tree>
Then, in TS:
#ViewChild('tree') tree;
this.tree.resetFilter();
I can't get a custom icon to my commandButton as explained in lots of other questions.
Folderstructure:
web/resources/icons/plus.png
web/resources/css/style.css
style.css:
.ui-icon-myAdd{
background-image: url("#{resource['icons/plus.png']}") !important;
}
header:
<h:head>
...
<h:outputStylesheet name="css/style.css"/>
</h:head>
button:
<p:commandButton value="..." icon="ui-icon-myAdd"/>
If I use styleClass instead of icon, my button's background is set to the image I'm trying to use as icon (which should be correct). So i guess there is no problem with the pathing.
Still the icon of my button is empty using the icon-tag.
Where am I wrong? What am I missing?
I've tried everything I found so far. Might be something pretty basic as I just started with JSF and primefaces.
I use:
PrimeFaces-5.2
Mojaara-2.2.1
IntelliJ IDEA 2016.2
Tomcat 9.0.0.M8
I intend to hide a <p:commandbutton> through a jquery form, and I can not access the object primefaces button, the form itself. I'm using primefaces 3.4.
I hide a button: save, in one form, where the button is: edit:
you can use the rendered attribute and set it to false.
<p:commandButton rendered="false"
You can access the button through its ID, just add the display:none css property:
$("#yourButtonsId").css("display", "none);
When the button is inside a form without prependId=false, the button ID is something similar to :testForm1:testButton your jQuery selector will look like this:
$("#testForm1\\:testButton").css("display", "none");
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?
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.
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.
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;
}
How does this code in the PrimeFaces DataTable row selection work?
<p:commandButton update=":form:display" oncomplete="confirmation.show()" image="ui-icon ui-icon-close" title="Delete">
<f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
</p:commandButton>
I am confused by the following: update=":form:display", and image="ui-icon ui-icon-close".
Is this inbuilt into Primefaces? or do I need to create an additional form, or have an external image mapped to it?
update=":form:display" refers to a specific element on the page. The first ':' goes to the root of the page, so there needs to be a component with the id "form" (probably a form) and inside that a component with the id "display". This means after the button actions has completed :form:display will be updated. Note that it's generally not a great idea to use absolute paths as they can be hard to keep up to date when you change the page structure. If the button is on the same level as the "display" component you could just do update="display", or you can do things like update="#form" to update the entire current form.
image="ui-icon ui-icon-close" refers to style classes in your css. These two comes predefined with primeface, but if you want to use custom graphics you can also define your own style classes for them.