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
Related
I'm using the PrimeFaces picklist component, but the "move" buttons (add, addAll, remove, removeAll) have all been rotated by 90 degrees. They should point left and right, not up and down. They work ok; they just don't look right. Does anyone have any idea why this is happening or how to correct the problem please?
I'm using PrimeFaces 8.0; Java 11; Wildfly 21.0.1.
The theme is nova-light, but it's the same with nova-colored and luna-blue. Using theme omega, the button icons are different, but correctly orientated. If I set showSourceControls=true the sort buttons all corrrectly show up and down. It's just the middle buttons that are pointing the wrong way.
The component is defined as:
<p:pickList value="#{postController.tagPicklist}" var="tag"
rendered="#{postController.mode eq 'Add' or postController.mode eq 'Edit' }"
itemLabel="#{tag.name}" itemValue="#{tag}"
converter="myTagConverter"
>
</p:pickList>
This has been reported to PF and appears to be a problem with the themes CSS.
Issue: https://github.com/primefaces/primefaces/issues/6880
I'm using JavaEE with Maven and Primefaces and i want to hide (HTML hidden) a menuitem in Primfaces tabMenu.
Something like the answer in this (prior) question would be good:
.ui-tabmenuitem: {
visibility: hidden !important;
}
Just another small hint:
Adding a style class doesn't work, adding a containerStyle is not supported: See primefaces github page
Your code works for hiding them if I remove the invalid ":"
.ui-tabmenuitem {
visibility: hidden !important;
}
Tested on PF 6.0 and 5.3.
If you want to do it dynamically you can conditionally add a styleClass to the relevant menuitem's;
<p:menuitem styleClass="#{bean.something ? 'ui-tabmenuitem-hidden' : ''}" value="Social">
and hide it with some script:
<script>
$('.ui-tabmenuitem-hidden').parent().css('visibility', 'hidden'); // or toggle()
</script>
Getting the parent is not possible with pure css, that's why the script is needed (as far as I can see..). Use the inspector i Firebug or similar to figure out what's needed.
Either just put the script in the page for running at load time, or put it in an onclick-listener on a button (or somewhere else).
Primefaces (5.2, Mojarra 2.2.13) inside Dialog Framework is not opening a <p:confirm>-MessageBox.
I have delete icons in a datatable as a <p:commandLink> per row inside a Dialog.
I want to have a user confirmation to delete every row.
Following code works as expected in a <p:dialog> but not using Dialog Framework. Dialog Framework blocks the click on the delete icon or in other words: shows the confirm box invisible and answers NO.
<p:dataTable id="idTblMfc" value="#{bnMfcs.rows}" var="ORow" editable="true" ...>
... Columns ...
<p:column>
<p:commandLink styleClass="ui-icon ui-icon-trash" title="#{msg.TXT_DELETE}" actionListener="#{bnMfcs.doDelete(ORow)}" update="idTblMfc">
<p:confirm header="#{msg.TXT_DELETE}" message="#{msg.PRM_DEL_CONT_MARKED}" icon="ui-icon-alert" />
</p:commandLink>
</p:column>
I tried the same with <p:confirmDialog> instead of <p:confirm> with the same result. OK, I found the tiny difference that <p:confirmDialog> doesn't block the delete icon click but also does not appear.
The rest of the dialog and the datatable works as expected even with message boxen shown with showMessageInDialog(...).
Any ideas?
As you can see in the showcase (http://www.primefaces.org/showcase/ui/overlay/confirmDialog.xhtml), you need both p:confirm (where you need confirmation) and p:confirmDialog (which defines how the dialog looks like).
Also make sure that you are in a h:form tag.
Solution found!
The documentation makes not clear that <p:confirmDialog> is mandatory. I had one on my main page and the page using Dialog Framework had not.
I want to use jQuery ui-icon-close instead of ui-icon-cancel. So I go to the fileupload.js file in the primefaces jar (3.3.1), change the reference to ui-icon-cancel to ui-icon-close (line#2082, upload template). But it doesn't work. Any idea? Thanks.
I found an easier way to solve this problem:
I added an id to my fileupload control:
<p:fileUpload id="related_file" ..../>
Then in my css, I add the following lines:
div[id*=related_file] .ui-icon-cancel{
background-position: -96px -128px !important;
}
This works and the cancel button ends up using the ui-icon-closeThick icon.
But I would still like to know why my original approach didn't work if anybody knows the answer. Thanks.
Is there a way to align the tabs to the right?
I tried to play with style="text-align:right;", as they do in yui - but it doesn't seem to work.
In order to solve this problem we need to override Primefaces' jquery-ui.css property.
1.Create a new css containing:
.ui-tabs .ui-tabs-nav li{float:right!important;}
(name it tab_view_align_right.css, and put it under web/resources/css).
2.Add
<h:head>
<h:outputStylesheet name="css/tab_view_align_right.css"/>
</h:head>
to the JSF file.
I know that it was an old post but I found new solution:
<p:tab titleStyle="float:right".../>