As per my question title, when I use richfaces, specifically a rich:popupPanel, my primefaces confirm dialog, p:confirmDialog, gets placed top/left justified. If I remove the the richfaces popup panel the primefaces dialog gets centered in the browser window as expected.
I tried changing the order of the namespace entries but that didn't work. What else can I try. I see richfaces also has a confirm dialog that I'm going to look into, it's just that I already had the primefaces version working on other pages, that happen to not have the richfaces popup panel.
I can post code if necessary.
You should not use Richfaces and Primefaces together. There so many conflicts between them both in terms of css and javascript. You can solve css problems by overwriting them and using '!important' at the end of each setting.
for example,
.class{
//...
text-align: center !important
}
However, Your best bet is to use just primefaces
Related
Environment: JSF 2.2.14, PrimeFaces 6.2
I have my command button set up as below, when the button is disabled, title will show up (when hovered over) in PF6.1, but won't show in PF6.2
<p:commandButton id="removeCmd" icon="fa fa-times"
actionListener="#{controller.remove()}"
update="#form"
disabled="#{ontroller.isCommandDisabled()}"
style="width: 20px; height:20px;margin-left: 5px;"
title="#{controller.isCommandDisabled() ? 'Command disabled due to user privilege' : 'remove selected item'}"
onstart="PF('bui').show(); PF('bar').show();"
oncomplete="PF('bui').hide(); PF('bar').hide();"
styleClass="removeCmd"/>
Title show up fine when button is not disabled.
Does anyone encounter the same problem? I also tried to wrap my p:commandButton inside h:panelGrid and use p:tooltip with it, not working either.
UPDATE: issue created on github: https://github.com/primefaces/primefaces/issues/3656
By nature I'm curious (and I follow the changes in PrimeFaces a little). If the title of a button does not work anymore between 6.1 and 6.2 I start analyzing a little. The generated html for a button in both PrimeFaces versions is identical. This makes me think whether it would have stopped working for other components as well. So I created a simple page
<p:inputText title="myInput enabled" />
<p:inputText title="myInput disabled" disabled="true"/>
And the behaviour change between using PrimeFaces 6.1 and 6.2 was the same. Title working for both in 6.1 and only for the first in 6.2. Since there was a major jquery change between PrimeFaces 6.1 and 6.2, I posted 'jquery show title tooltip of disabled inputs and buttons' in google.
One of the hits was:
Show tooltip for disabled items
In it there was a reference to some css(!) that disables dom events and consequently not showing titles.
pointer-events: none;
I opened my browser developer tool and in the filter part in the css tab, I put 'pointer'. When using 6.1, there was nothing there, but in 6.2 there was.
.ui-state-disabled {
cursor: default !important;
pointer-events: none;
}
Which seems to be coming from the components.css file (according to my browser developer tool). This is not a file that exists in the PrimeFaces repository but one that is created when the PrimeFaces release is build via maven:
One of the files that is included here is the jquery-ui.css and in it is the piece of css referenced above.
When I disabled the corresponding pointer-events: none in my browser developer tool, the titles became visible both for the input and the button.
So if you want to override this, please set this to 'all' (or any other value of your liking).
html .ui-state-disabled {
pointer-events: all;
}
See also
How do I override default PrimeFaces CSS with custom styles?
I want to represent my data from a MYSQL database table in a primefaces carousel or slider or datagrid with one row. The carousel does not work at all. The datagrid does not work when I add rows="1" attribute and I don't know how to implement my data into a slider.
Any ideas?
I solved the problem. The version of jQuery I had included into my xhtml file was different from that of primefaces jQuery library. So I just used the primefaces jQuery library and deleted the other one and all primefaces components worked as they should.
I have left, right and center panels in my xhtml page. Left panel contains menu item links and want to use them to refresh the center section through ajax.
I have seen quite a few links related to this but I am not sure on the final solution.
If this is not the preferred approach, please do guide on the same.
I am using managed beans which are sessionscoped and xhtml file uses following to do the dynamic call.
<p:menuitem value="Done" action="#{navBean.setPageName('done')}" update="centerPanel" immediate="TRUE" />
When I use primefaces 2.2.1, i am able to update the center panel on second click only from the menu in left panel.
When I use primefaces 3, the center section doesn't get updated.
The managed bean setter does get invoked in both cases.
Is it something to do with primefaces configuration or am I missing something?
I've used this BalusCs guide to view and paging datatables. It's very nice and useful guide (where would I be without it?), but I have one more question (maybe directly for you, BalusC):
Is there some posibility to scroll datatable horizontally and mainly vertically (without moving a headers)?
Thank you
EMERGENCY SOLUTION (using HTML):
place <h:form> to <div id="scrolltable">
and define scrolltable in css, for example:
#scrolltable{
width: 920px; height: 300px;
overflow-y: scroll;
overflow-x: auto;
}
This is not directly possible in HTML and therefore also not with the standard set of JSF components. You would need to bring in a lot of specific CSS/JS works. That's too much of detail and pain to summarize in a single answer.
However, there exist 3rd party JSF component libraries which offers that in a single ready-to-use component. For example PrimeFaces and RichFaces 4.x (and RichFaces 3.x) have scrollable datatable components which are even able to fetch new rows by ajax. Since you tagged the question with richfaces, you should be able to use the RichFaces' one.
I am using jsf portlets (JSR 168), and i am implementing ajax with JSF ( i have a text field and select one menu, on entering a char on the text field, should get the matching strings on the menu, an auto completion functionality). but i am not using any jsf adv specs like richfaces / facelets etc.. our project is using jdk1.4 still.
so i have a h:inputText with onkeyup event which calls javascript method and gets the values into select one menu. this works perfectly alright.
but later i am trying to submit the form with the textfield value and selectonemenu values using h:commandbutton.
there comes the issue, the action menthod in jsf bean is not getting invoked.
but when i tried removing the onkeyup event from the h:inputtext it works perfectly.
please suggest me. whatz goin on here.
got it resolved... there was a problem with my selectonemenu, it was not identifying the item when it is pulling from ajax. so replaced it with html select for now, but i will figureout a way to build the f:selectitem through javascript.