I am implementing a gallery using PrimeFaces with the component p:galleria, everything works as expected but the footer (Film Strip) is shown twice.
By the way, if I close and then reopen the modal dialog which contains the gallery the Film Strip displays correctly.
More Information:
The gallery is contained in a modal dialog
PrimeFaces version: 5.3
Browsers: Chrome and IE
Any help is appreciated
I have resolved this behavior with the next workaround...
I had to open the external dialog using onclick() event instead of oncomplete()
Greetings!!!!
I already have onclick but the filmstrip still gets doubled.
A working workaround for me is to update the galleria when the dialog is shown, e.g.
<p:commandLink onclick="PF('popup').show();" update="galleria"/>
<p:dialog id="popup">
<p:galleria id="galleria"/>
</p:dialog>
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?
Here is my scenario. Room Object have ManyToOne relationship with Tax Object. There are two pages for Room, Create New and List All.
At Create New Page, there is Tax Field. I use OverlayPanel + DataTable + SelectEvent to assign Tax Object instead of using AutoComplete or SelectOneMenu. Everything works great at this page.
At List All Page, I use Pop-up Dialog to edit the desired record. OverlayPanel + DataTable not working anymore because OverlayPanel is inside the Dialog. SelectEvent still calls Tax Setter Method but value is null.
I use PrimeFaces 3.5 and looking for solutions that will work with PrimeFaces 3.5 only. Thanks for any help!
I think OverlayPanel (DataTable inside) is not compatible with Dialog. Using Dialog again instead of OverlayPanel solved the problem. Dialog inside Dialog works fine. I have to add appendToBody="true" attribute to child Dialog because UI is blocked. I use PrimeFaces 3.5 and works for me.
This question already has answers here:
RichFaces 3 to RichFaces 4 migration
(2 answers)
Closed 7 years ago.
In my project I am using RichFaces.
When I click on the a4j:commandButton button, which is used for saving the page as a pdf, a4j:status is shown on the page and then pdf window opens with Cancel and Ok buttons. I proceed to click on the Ok button.
After that the Ajax loader is still shown. It does not hide even though the page is getting refreshed manually.
Here is my code:
<a4j:commandButton id="pdfButton" status="ajaxStatus"
image="#GeneralPageAttributes.pdfImage}"
title="#{platform.clickToPdfLabel}"
alt="ExportPDF"
onclick="selectedText(#{fileContentDiv})"
action="#{FileViewer.pdfBeforePerformAction}"
reRender="bottomOutputPanelId"/>
<a4j:status id="ajaxStatus" onstart="#{rich:component('fileViewerProgressModalPanel')}.show();"
onstop="#{rich:component('fileViewerProgressModalPanel')}.hide();" />
<rich:modalPanel id="fileViewerProgressModalPanel"
shadowOpacity="0"
autosized="true"
style="background:none;border:none;"
moveable="true">
<h:graphicImage url="#{GeneralPageAttributes.progressBarImage}"/>
</rich:modalPanel>
Any idea how to hide the a4j:status after pdf window is closed?
Change the id attribute of the a4j:status to a name attribute with the same value.
One of the numerous meaningless and incompatible changes made between RichFaces 3 and 4, most of them undocumented, was to change the hook between status= and a4j:status from the id attribute to the name attribute.
See this answer for a long list.
Try adding the attribute name="ajaxStatus" to a4j:status:
<a4j:status id="ajaxStatus" name="ajaxStatus" onstart="#{rich:component('fileViewerProgressModalPanel')}.show();"
onstop="#{rich:component('fileViewerProgressModalPanel')}.hide();" />
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
I got a Problem displaying messages on a modal panel using Spring Webflow and Richfaces. The Messages a published to the Message Context in my action, without a component-id. This works fine on my main page, but if I open a rich:modalPanel and click a button there the Message is not displayed.
Can anybody give me a hint why this happens? Do modal panels not support <rich:messages global="true"/>
My button looks like:
<a4j:commandButton
id="add"
action="add"
value="#{resourceBundle['button.add']}"
reRender="adPopupPanel"/>
My messages-tag like:
<rich:messages globalOnly="true"/>
Add attributes to your message tag such as showSummary and ShowDetail and set them as true.