I am using a primeface dataTable and the primeface rowEditor. As tooltip for the deleteLink I use a primeface tooltip.
The primeface tooltip doesn´t look like the rowEditor tooltip. Is there a possibility that they look same?
<p:column style="width:32px">
<p:rowEditor editTitle="Bearbeiten" saveTitle="Speichern" cancelTitle="Abbrechen" />
</p:column>
<p:column style="width:32px">
<p:commandLink id="deleteLink" styleClass="ui-icon ui-icon-trash" action="#{SFKBean.deleteStrasse(str)}" update="strList, :sdform:msgs" />
<p:tooltip id="deleteLinkTT" for="deleteLink" value="Straße entfernen" position="bottom" />
</p:column>
That's how it looks
rowEditor '...title' tooltips are browser tooltips. p:tooltip generates non-browser tooltips that (can by design) are not easily made to look like browser tooltips (different for each browser) and are meant for components that doe not support browser based tooltips. If you want a 'normal' tooltip, use the title attribute on the p:commandLink
<p:commandLink id="deleteLink" styleClass="ui-icon ui-icon-trash" action="#{SFKBean.deleteStrasse(str)}" update="strList, :sdform:msgs" title="Straße entfernen" />
If you do want to style the p:tooltip like browser native ones, add a styleClass attribute to it and make selectors that are specific for browsers (might require some javascript)
Related
I have a chips component and I want to add a button beside it and use this button to add values to this component.
My draft code is:
<p:outputPanel>
<p:chips id="TextToChips" value="#{myBean.myList}" unique="true" />
<p:button id="addButton">
<p:ajax event="click" process="TextToChips" update="chips" delay="300" listener="#{myBean.method}" />
</p:button>
</p:outputPanel>
I want to use the method addItem(value), which is listed in the documentation. So how can I use that if my principle is possible?
I have curious rendering problem. I'm trying to attach overlay panel with the button. When I press the button, panel is rendered. However a sub-component in the panel is not. When panel is visible and I do double click on the button, sub-component get's rendered. In the same time, when panel is not rendered and I do double click, sub-component is not rendered (and panel not displayed).
Generated html and computed CSS is the same for both painted/non-painted components.
Do you know where the problem can be? Am I missing some setting? Have I overlooked something or is it a bug?
PrimeFaces template:
<p:layoutUnit position="center">
<h:form>
<p:commandButton id="chooseLangBtn" value="Btn" type="button" />
<p:overlayPanel id="langPanel" for="chooseLangBtn" showCloseIcon="true" dismissable="true">
<p:selectOneListbox id="langSelect"
rendered="true"
value="#{selectOneLanguageView.language}"
converter="languageConverter"
var="t" filter="true"
filterMatchMode="startsWith">
<f:selectItems value="#{languageService.languages}"
var="lang"
itemLabel="#{lang.name}"
itemValue="#{lang}" />
<p:column>
<h:graphicImage width="22px" alt="#{lang.name}" library="main" name="images/flags/var/#{t.code}.svg"/>
</p:column>
<p:column>
<h:outputText value="#{t.name}" />
</p:column>
</p:selectOneListbox>
</p:overlayPanel>
</h:form>
Empty/Rendered images:
It's a bug in the Omega theme. See current status here: https://github.com/primefaces/themes/issues/10
I am using Primefaces 5.3 version . For picklist component having lot of values scrollbar does not appear in IE preventing viewing all the values.
Below is the pciklist component code,
<p:pickList value="#{sublocation.secureAreaDualList}"
var="zone" styleClass="noupdate" converter="entityConverter"
showSourceFilter="true" showTargetFilter="true"
filterMatchMode="contains"
itemValue="#{zone}" itemLabel="#{zone.code} - #{zone.displayName}" responsive="true" process="#this" update="#this">
<p:ajax event="transfer" listener="#{requestMBean.onTransfer}" update="#this" />
</p:pickList>
What css should be overriden to display scroll bar in IE browser ?
I want to show the icons without buttons but it doesn't work. I get the following message: no Mime-Type was Found.
The two icons are default icons from Primefaces.
I use JSF 2.1 and primefaces 3.5
<h:graphicImage rendered="#{!task.IS_SEEN}" name="ui-icon-mail-closed"/>
<h:graphicImage rendered="#{task.IS_SEEN}" name="ui-icon-mail-closed"/>
If I use buttons it would work or can I set that the button can not be pressed
<p:commandButton rendered="#{!task.IS_SEEN}" icon="ui-icon-mail-closed" />
<p:commandButton rendered="#{task.IS_SEEN}" icon="ui-icon-mail-open" />
If you want just a clickable image that trigger an action in the backing bean I suggest wrapping a graphic image in a h:commandLink.
<h:commandLink rendered="#{!task.IS_SEEN}" value="" action="#{YourBean.myAction}">
<h:graphicImage value="your-image-here"/>
</h:commandLink>
If you want easy to use, nice, vectorial icons I suggest you to check Font Awesome http://fontawesome.io/icons/ as well.
To use Font Awesome just include the following line in your <h:head>:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>
Then you can easily put the icons inside commandLinks in this simple way:
<h:commandLink rendered="#{!task.IS_SEEN}" value="" action="#{YourBean.myAction}">
<i class="fa fa-envelope"></i>
</h:commandLink>
Also you need specify css class ui-icon like this:
<h:panelGroup styleClass="ui-icon ui-icon-mail-closed" />
those are in fact CSS classes that point to a sprite file, so technically they are not icons.
try using:
<h:panelGroup styleClass="ui-icon-mail-closed" rendered="#{!task.IS_SEEN}" />
and if there's a need style it accordingly with padding.
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>