Is there any attribute for p:tooltip for direction as we get with rich:tooltip ? I essentially want my tooltip to show up at top right of an image. Not sure how to do that. The number of attributes present for p:tooltip seem to be very limited. Following is the code for richfaces.
<h:commandLink value="Simple Link" id="link">
<rich:toolTip followMouse="true" direction="top-right" mode="ajax" value="#{bean.toolTipContent}" horizontalOffset="5"
verticalOffset="5" layout="block">
<f:facet name="defaultContent">
<f:verbatim>DEFAULT TOOLTIP CONTENT</f:verbatim>
</f:facet>
</rich:toolTip>
Well this might be something for you? http://fractalsoft.net/primeext-showcase-mojarra/sections/tooltip/customizedTooltips.jsf;jsessionid=14y1z1yedm21t910h6zonwboq
Primefaces ext has a really neat tooltip imo.
Related
How do i add a "custom" button in p:schedule? I tried doing it with the help of a header facet like in the p:dataTable component, but to no avail.
Sorry for being unclear initially, it also probably didnt help that someone butchered my question by editting it's title, here are more details with snippets of code.
I want to do somthing similar to this:
<p:tab title="#{bean.name}" value="bean" >
<f:facet name="title">
<h:outputText value="#{bean.name}"/>
<p:selectBooleanButton styleClass="...">
<p:ajax converter="... />
</p:selectBooleanButton>
</f:facet>
</p:tab>
The code is creating a tab (for an accordionpanel) with a text+button in it instead of the default text only.
I am looking for the same behaviour in a p:schedule component.
<p:schedule value="#{scheduleView.lazyEventModel}" leftHeaderTemplate="today" centerHeaderTemplate="prev, title, next" rightHeaderTemplate="month, agendaWeek" >
<f:facet name="header">
<h:outputText value="#{bean.name}"/>
<p:commandButton styleClass="..."/>
</f:facet>
</p:schedule>
The same add a button to the header principle, except this time on schedule. And of course since schedule does not have any facets available for overwriting this approach does not work.
Finally, my question is: How do I add a button in the p:schedule header like in the picture above?
P.S: Forgive me for confusing you people with datatable, used it because it supports multiple facets (header, footer).
Client side it is all html that can be manipulated with javascript (jquery if you like).
So if you create your schedule and button like this:
<h:panelGroup id="mySchedule">
<p:schedule value="#{scheduleView.lazyEventModel}" leftHeaderTemplate="today" centerHeaderTemplate="prev, title, next" rightHeaderTemplate="month, agendaWeek"/>
<h:outputText value="#{bean.name}" id="scheduleOutputText"/>
<p:commandButton styleClass="..." id="scheduleCommandButton"/>
</h:panelGroup>
You can move the h:outputText and p:commandButton into the schedule with jquery dom manipulation.
$("#scheduleCommandButton").insertBefore(".fc-left");
$("#scheduleOutputText").insertBefore("#scheduleCommandButton");
If you put this script inside the panelGroup and update the panelGroup each time you'd normally update the schedule via ajax, the button and text should be added moved again in an update.
<h:panelGroup id="mySchedule">
<p:schedule value="#{scheduleView.lazyEventModel}" leftHeaderTemplate="today" centerHeaderTemplate="prev, title, next" rightHeaderTemplate="month, agendaWeek"/>
<h:outputText value="#{bean.name}" id="scheduleOutputText"/>
<p:commandButton styleClass="..." id="scheduleCommandButton"/>
$("#scheduleCommandButton").insertBefore(".fc-left");
$("#scheduleOutputText").insertBefore("#scheduleCommandButton");
</h:panelGroup>
You could also put the text and button in a panelgroup and move that by dom manipulation. Just make sure you use the right selectors (I did not prepended the form id to the selectors above). You can also use class selectors instead of id's. That is up to you.
But make sure you use this with care. As #JasperDeVries mentioned in a comment, it is easy to break things. Use it just sparsely, carefully and only as a last resort
I am using BootsFaces in version 0.7.0.
In BootsFaces, you can easily create a badge with <b:badge value="#{bean.size}"/>. This works great.
Actually I am using a <b:panel title="Authors"/>.
I am trying to add a <b:badge/> just next to the title (As you can see in the image). Is there any possibility to achieve this with BootsFaces or is there a nice way in CSS?
Have you other hints for using this, specially for user XP?
Replace the title of the <b:panel> by a heading facet:
<b:panel>
<f:facet name="heading">
<h:outputText value="Panel heading with a facet in place of a title "/>
<b:badge style="margin-left:10px" value="since version 0.4"/>
</f:facet>
<h:outputText value="Panel Content"/>
</b:panel>
(Note that the style attribute of <b:badge> is a feature of BootsFaces 0.8.0).
View:
<p:dialog header="Search in code tables" widgetVar="dlg" resizable="true">
<p:selectOneMenu id="tableId" value="#{xxx.tableId}"
required="true" label="tableId">
<f:selectItems value="#{xxx.tables}" ></f:selectItems>
</p:selectOneMenu>
The z-index for the dialog causes the menu options to hide behind it.
I am following standard example from Primefaces showcase:
http://www.primefaces.org/showcase/ui/overlay/dialog/loginDemo.xhtml
This appears to be a know n issue
http://forum.primefaces.org/viewtopic.php?f=3&t=33972
Can someone suggest a proper fix.
okay I have managed to figure this out.
I was missing a appendTo telling which component to append the select:
<p:selectOneMenu id="tableId" value="#{xxx.tableId}"
required="true" label="tableId" appendTo="#this" >
This fixes the z-index as well as adding a scrollbar to the drop down.
I have not been able to find this anywhere so posting this self answer.
Try to use panelStyle for selectOneMenu.
Using appendTo = "#this" may cause something like this:
You could use panelStyle = "position:fixed" instead.
Regards.
The natural behaviour for a label attached to a checkbox button is to change the state of the button when it (the label) is clicked.
This works in JSF and Richfaces.
Is there a way to make it work in Primefaces(3.5) without involving javascript ?
Is this a bug ?
<p:outputLabel for="checkbox" value="Select it:" />
<p:selectBooleanCheckbox id="checkbox" label="My label" value="#{bean.value}" />
It doesn't work out-of-the-box in plain JSF but in PrimeFaces the itemLabel attribute should do it:
<p:selectBooleanCheckbox id="checkbox" itemLabel="My label" ... />
This bug has been fixed since PrimeFaces 4, so you can use p:outputLabel with recent versions of PrimeFaces. Good thing of the p:outputLabel is that it allows you to add body content to it. So you can add images, icons, a link to terms and conditions, etc.
<p:selectBooleanCheckbox value="#{bean.value}"/>
<p:outputLabel for="#previous">
Label to <strong>click</strong>
</p:outputLabel>
I specified this
<rich:panel>
<f:facet name="header">
Panel #1. Changing Style Synchronously
</f:facet>
Each component in the RichFaces has a pre-defined set of classes you can manipulate with. If defined, those
classes overwrite the ones come from the skin.
</rich:panel>
from the RichFaces demo, in my JSF page and no header appears, although I've nothing in my css which would interfere. What might be the reason for this?
Thanks
i dont see any problem with using f:facet
try
<f:facet name="header">
<div><h:graphicImage value="/images/search.png" />
<h:outputText value=" Action Logs Search" /></div>
</f:facet>
in order to regenerate the error you mentioned
Mine disappeared when I accidentally included the panel's facets in the panel form. The facets must be children of the modal panel:
<rich:panel>
<a4j:form> <!-- This is trouble! -->
<f:facet name="header">
Panel #1. Changing Style Synchronously
</f:facet>
Each component in the RichFaces has a pre-defined set of classes you can manipulate with. If defined, those
classes overwrite the ones come from the skin.
</a4j:form>
</rich:panel>
OK, do please feel free to comment on why the f:facet tag is not working, but I get my nice shiny headers when I change the code so it's like this instead:
<rich:panel header="header">
Each component in the RichFaces has a pre-defined set of classes you can manipulate with. If defined, those
classes overwrite the ones come from the skin.
</rich:panel>