I would like to create a custom look for a tooltip.
<h:outputText value="blarg" title="tooltip">
Plese do not tell me to use rich:tooltip as I have tried and they have a bug where it extends past a data table. So I was wondering if it is possible to actually style the jsf's outputText tooltip.
If you know how to, please give me pointers.
Thank you. Have a good day.
You cannot style a tooltip using plain vanilla HTML/CSS. You really need JavaScript for this as well which walks through the HTML DOM tree and "converts" every title attribute into some hidden fancy looking <div> which gets shown during onmouseover.
Since RichFaces already ships with jQuery, it should be possible to grab a jQuery plugin for that. For example, the qTip plugin.
Please do not tell me to use <rich:tooltip> as I have tried and they have a bug where it extends past a data table.
It should technically be a matter of finetuning the CSS associated with the <rich:tooltip>.
You can do this.
Use <p:tooltip/> of Primefaces.
View:
<h:panelGrid columns="2" cellpadding="10">
<h:outputLink styleClass="outputText" id="fades" value="#">
<h:outputText value="Your text"/>
</h:outputLink>
<p:tooltip id="toolTipFades" for="fades" value="The text for tooltip"/>
</h:panelGrid>
Css:
.outputText{
cursor: default!important;
text-decoration: none!important;
}
With this code you simulate a <h:outputText /> with a tooltip and works ;D
Related
The Primefaces Documentation states that the following code will be invalid due to the fact that every layoutUnit needs its own form:
<p:layout fullPage="true">
<h:form>
<p:layoutUnit position="north">
<p:inputText value="#{testBean.input1}" />
</p:layoutUnit>
<p:layoutUnit position="center">
<p:inputText value="#{testBean.input2}" />
<p:commandButton value="save" action="#{testBean.save}" />
</p:layoutUnit>
<p:layoutUnit position="south">
<p:inputText value="#{testBean.input3}" />
</p:layoutUnit>
</h:form>
</p:layout>
However, when I nest p:layout inside of a form, the code works without any problem:
<h:form>
<p:layout fullPage="true">
<p:layoutUnit position="north">
<p:inputText value="#{testBean.input1}" />
</p:layoutUnit>
<p:layoutUnit position="center">
<p:inputText value="#{testBean.input2}" />
<p:commandButton value="save" action="#{testBean.save}" />
</p:layoutUnit>
<p:layoutUnit position="south">
<p:inputText value="#{testBean.input3}" />
</p:layoutUnit>
</p:layout>
</h:form>
What is the explanation for that behaviour? Can my approach of having just a single form tag outside of p:layout cause problems at some time point?
The PrimeFaces documentation does indeed state on Page 309 of the 6.1 documentation
When working with forms and full page layout, avoid using a form that contains layoutunits as generated dom may not be the same. So following is
invalid.
And in that they reference your first example. It is technically not invalid but due to the way the layout component renders the html needed in the browser (and maybe client-side does dom manipulation) to get the good full page experience, it might (will? never tried it myself) result in unexpected behaviour.
They also state
A layout unit must have it’s own form instead, also avoid trying to update layout units because of same reason, update it’s content instead.
'Must have' (emphasis above is mine) is to strong here, they'd better have stated
give each layout unit its own form if a form is needed in the layout unit.
A full form around the full page layout might work now assuming the layout will not mess with things and e.g. add parts to the surrounding body tag (if it does do dom manipulation to achieve a certain behaviour), but I doubt they'd give you guarantees. An additional reason to not do it like you ask might be that you can run into nested forms when developers of 'partial pages' a not fully aware of the 'god form'. So I would advise against it.
So if e.g. the north and south layoutunit contain sort of fixed functionality (header with search, footer with some features) then put a h:form directly in the layout unit. If the center part contains dynamic things e.g. a ui:include, put the `h:form in the included parts.
See also:
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
How to ajax-refresh dynamic include content by navigation menu? (JSF SPA)
I use PrimeFaces 6 and want to position the dialog on top:
options.put("position", "top");
However this does not work. Is there any way to center the dialog on top?
I am quite desperate now
As per Primefaces User Guide 6.0
Position
By default dialog is positioned at center of the viewport and position option is used to change the
location of the dialog. Possible values are;
• Single string value like ‘center’, ‘left’, ‘right’, ‘top’, ‘bottom’ representing the position within
viewport.
• Comma separated x and y coordinate values like 200, 500
• Comma separated position values like ‘top’,‘right’. (Use single quotes when using a combination)
Some examples are described below;
<p:dialog position="top" ...>
<p:dialog position="left,top" ...>
<p:dialog position="200,50" ...>
I know, you would like to set position to primefaces external dialog(dialog framework).
You cannot style or css to dialog because which is wrap by ifram.
But, it is OK to apply css to generated div. This div id is formId + commendLinkId or commendButtonId + _dlg
Example
<h:form id="myForm">
<p:commandButton id="myDialgoBtm" value="Select" action="...." immediate="true">
<p:ajax ..../>
</p:commandButton>
</h:form>
Client/Brower Source
<div id="myForm:myDialogBtn_dlg" ..>
<div ....>
//this is bor title bar of dialog
</div>
<div ....>
//this is bor content of dialog
<ifarm ....>
//here your external dialog page
</ifarm>
</div>
</div>
if so, the id of div will be myForm:myDialogBtn_dlg. You can inspect in browser.
Example CSS for your dialog
#myForm\:myDialogBtn_dlg {
top: 0px!important
}
I don't think, it will be better solution, Currently, I solve this issue by above way.
I was finding the solution, but the only way that I found it was this:
.ui-dialog {
top: 100px !important;
}
I put this code below of
I've implemented a p:commandButton to update the contents of a table when it is clicked. I think this is working (although It isn't properly tested) but the more immediate issue is as follows.
Bug
Before the request, the title bar looks like this:
And after I hit the refresh button on the right, the page re-renders as follows:
Attempts to solve
The following is the current code for my p:commandButton:
<p>
<p:commandButton oncomplete="eventFeedsDialog.show()" update=":eventFeedsForm" id="feedsRefresh" icon="ui-icon-refresh" title="Refresh page" style="height:40px; width:40px; float:right;">
<f:setPropertyActionListener value="#{true}" target="#{searchBean.refresh}"/>
</p:commandButton>
</p>
The eventFeedsDialog is the p:dialog element that this button is wrapped in, which is further wrapped in a h:form element. Here is the declaration of the eventFeedsDialog element:
<p:dialog id="eventFeedsDialog" header="Feeds" widgetVar="eventFeedsDialog" resizable="false" width="1000"
styleClass="dialog">
I've tried changing the oncomplete attribute to point at the h:form instead of the dialog, but it appears not to have worked. I thought up a hack, whereby I append a mountain of spaces in the header attribute, but that is horrendously ugly.
I've not found anything on google like this, so I was wondering if you guys have any ideas?
On PrimeFaces showcase page there is a simple title bar which fits in the actual theme. I mean the "Welcome to PrimeFaces showcase" text on this page: http://www.primefaces.org/showcase/ui/home.jsf
This is not a button nor any kind of responsive control, just a themed textbox or title bar.
I've searched a lot but I was not able to find a simple <p: > component which can generate this kind of result.
Can anybody help me, how to make such an element in PrimeFaces?
Here you can find the xhtml code for the welcome page - home.xhtml(home.jsf) : http://code.google.com/p/primefaces/source/browse/examples/trunk/showcase/src/main/webapp/ui/home.xhtml?r=5567
As you can see there, the 'title bar' is just a simple <h1> tag with some css:
<h1 class="title ui-widget-header ui-corner-all">Welcome to PrimeFaces ShowCase</h1>
There you can find the entire primefaces website/project, and the CSS files as well, but it's better to implement your CSS...
You can use <p:toolbar> tag for it.
Though its main usage lies in grouping together several content, But it does give the effect of a Title Bar you are looking for.
<p:toolbar>
<p:toolbarGroup align="left">
<p:outputLabel value="Welcome!!" />
</p:toolbarGroup>
</p:toolbar>
You can surround the <p:outputLabel> tag with other tags like <h1>, <p> with CSS to give more effect.
I'm using Primefaces for a project and I'm seeing bad results with IE vs chrome/firefox/safari in regards to modal Primefaces dialog windows and I think it has to do with form placement. In IE these dialogs dont appear, but I can see the transparency. In chrome/firefox they're fine. What is the best practice for the below situations:
List item base xhtml page that has one form. This page has several
links that open up dialogs who have their own ajax submit
(commandButton, commandLink) events.
Should the dialog be located within or outside the base xhtml page's form?
Should the dialog have its own form?
Below is an illustration:
<html>
<ui:composition>
<ui:define name="content">
<h:form id="xyz">
//main page content here, commandButtons, commandLinks...etc
</h:form>
<dc:zoomDialog/>
</ui:define>
</ui:composition>
</html>
<!-- zoomDialog maps to the below -->
<html>
<ui:component>
<h:form id="dialogFrm">
<p:dialog widgetVar="zoomDlg" modal="true" styleClass="dialog dialog2"
draggable="false" resizable="false" showEffect="fade"
hideEffect="fade">
//dialog content here, commandButton, commanLink...etc
</p:dialog>
</h:form>
</ui:component>
I don't see it in your example code but some time ago I had a similar problem. The reason was: nested forms (the same symptoms as you describe: all browser work, except IE). Nested forms are not valid html. Some browsers can handle it. IE cannot.
A good test is to put the whole html outpout (browser source, not the jsf source) into the W3C Html validator and analyze the results.
In the Primefaces showcase the h:form element is always inside the p:dialog. See this discussion.