The link contains an example of richfaces 4 popuppanel:
richfaces popuppanel example
Here is the code:
<rich:toolbar height="26px" id="tb">
<rich:toolbarGroup location="right">
<h:outputLink value="#">
<rich:componentControl event="click" operation="show" target="ls">
<a4j:param name="event" value="event" noEscape="true" />
<rich:hashParam>
<a4j:param noEscape="true" name="top"
value="jQuery(#{rich:element('tb')}).offset().top + jQuery(#{rich:element('tb')}).height()" />
<a4j:param noEscape="true" name="left"
value="jQuery(#{rich:element('tb')}).offset().left + jQuery(#{rich:element('tb')}).width() - p_width" />
</rich:hashParam>
</rich:componentControl>
Search
</h:outputLink>
</rich:toolbarGroup>
</rich:toolbar>
<rich:popupPanel header="Enter Search Terms" id="ls" autosized="true" modal="false" moveable="false" resizeable="false" followByScroll="false" >
<h:panelGrid columns="3">
<h:outputText value="Search:" />
<h:inputText />
<h:outputLink onclick="#{rich:component('ls')}.hide(event); return false;" value="#">Search
</h:outputLink>
</h:panelGrid>
</rich:popupPanel>
<h:outputScript type="text/javascript" target="body">
p_width = #{rich:component('ls')}.width();
</h:outputScript>
But the popup is appearing in random places, i.e. sometimes under the bar, and then have to scroll and sometimes above. Is it possible to make sure it always appears right above the bar while being attached to it?
The top and left parameters set the position of the panel, change them to where you want the panel to be, or call the method directly:
RichFaces.component('panelId').show(null, {top: "800px", left: "500px"})
You're using the part of the example that specifically sets the panel under the bar so it shouldn't be surprising when the panel appears there.
Related
How to align icon field to top with - Primefaces 3.2 with JSF2.
I'm dealing with a combobox that represents a complex concept to the business logic, by user side. So the field will have a icon (link with graphic image) that summon a explanation to user understand better the concept. The problem is that the icon dont stay align in the top, taking as reference the heigth of field(combobox). bellow has the code and a image of the current representation.
Code:
<h:outputLink id="stockBlockedProductsWithAllStockBlockedInfo" value="#">
<p:graphicImage library="images" name="information.png" width="16px"/>
</h:outputLink>
<p:tooltip for="stockBlockedProductsWithAllStockBlockedInfo"
showEffect="slide" hideEffect="slide" >
<span style="white-space: nowrap">
<h:outputText escape="false" value="#webcore_view['Informação']}"/>
</span>
</p:tooltip>
Observe that the info icon (i) is align to bottom of the field
Thanks to All!
I'll Explain how i solved this task:
I setted a style vertical alignment directly by the component.
And was quite simple just add the correct style alignment:
style="vertical-align: top;"
The correct code looks like:
<h:outputLink id="stockBlockedProductsWithAllStockBlockedInfo" value="#">
<p:graphicImage library="images" name="information.png" width="16px"
style="vertical-align: top;"/>
</h:outputLink>
<p:tooltip for="stockBlockedProductsWithAllStockBlockedInfo"
showEffect="slide" hideEffect="slide" >
<span style="white-space: nowrap">
<h:outputText escape="false" value="#webcore_view['Informação']}"/>
</span>
</p:tooltip>
And the correct position is like that:
I want to create a JSF form where users can write their name and surname and validate them using JSF validators. The problem is that I would like to set the same space between the 2 inputText boxes in the form, in both cases, when the typed data is correct according to the validator, and when it is not correct. So if between the 2 inputText boxes there are X pixels if the user has not typed anything, when typed name is not correct, the error showing message should be displayed between the 2 inputText boxes and the pixels between them should be also X px. I suppose this is a CSS issue, but I am unable to get it, so any help would be appreciated.
Here is my code
<h:form>
<p:panel id="panelregister">
<h:panelGrid columns="1">
<!--Name-->
<p:inputText id="name" label="name" size="32" maxlength="9"
value="#{mManagedBean.name}">
<f:validator validatorId="packagevalidators.NameValidator"/>
</p:inputText>
<p:watermark for="name" value="Name (*)" />
<p:message for="name"/>
<!--Surname-->
<p:inputText id="surname" label="surname" required="true" size="32" maxlength="9"
value="#{mManagedBean.surname}"
requiredMessage="Must enter a surname">
<f:validator validatorId="packagevalidators.SurnameValidator"/>
</p:inputText>
<p:watermark for="surname" value="Surname (*)" />
<p:message for="surname" />
<p:commandButton value="Submit" action="#{mManagedBean.save}" ajax="false" />
</h:panelGrid>
</p:panel>
</h:form>
You are using h:panelGrid which renders as HTML <table>.
p:message will be rendered as div and by default that div won't have any content so it won't take any space you provide.
One way to do this is to use a h:panelGroup around it and give pre defined height of p:message
Example:
<h:panelGroup layout="block" style="height:27px">
<p:message for="name" />
</h:panelGroup>
I want to implment a scrollbar for a outputLabel but if i use scrollbar component it put every list elment in a new row. The whole output should be disyplayed in one row and the list should be scrollable. Can i fix this problem with a CSS attribute?
i use primefaces 4.0 and jsf 2.1
here is my code
<p:commandButton id="newMessage" update=":contentForm"
actionListener="#{taskboxBean.newMessage}" value="New Message" />
<p:commandButton id="trash"
update=":contentForm, :postForm:tabViewPosts:trashTable, :postForm:tabViewPosts:inboxTable, :postForm:tabViewPosts:sentTable"
actionListener="#{taskboxBean.deleteSelectedTaskbox}" icon="ui-icon-trash" title="Trash" />
<p:scrollPanel>
<ui:repeat var="task_to_user" value="#{taskboxBean.selectedTaskbox.TASKBOX_TO_USERS}">
<p:outputLabel
value="#{task_to_user.USER.EMAIL} #{task_to_user.USER.FIRST_NAME} #{task_to_user.USER.LAST_NAME} #{task_to_user.USER.FIRST_NAME}" />
</ui:repeat>
</p:scrollPanel>
<h:outputText value="#{taskboxBean.selectedTaskbox.TASKTYPE.NAME} " />
<h:outputText value="#{taskboxBean.selectedTaskbox.CREATE_TIMESTAMP} " />
This is working:
<h:panelGroup layout="block" id="map-wrapper">
<p:gmap center="#{locationService.getLatLngAsString(userSession.location)}"
zoom="15"
type="HYBRID"
model="#{addOfferController.emptyModel}"
onPointClick="handlePointClick(event);"
style="width:600px;height:400px"/>
</h:panelGroup>
This is not:
<h:panelGroup layout="block" id="map-wrapper" style="display: none">
<p:gmap center="#{locationService.getLatLngAsString(userSession.location)}"
zoom="15"
type="HYBRID"
model="#{addOfferController.emptyModel}"
onPointClick="handlePointClick(event);"
style="width:600px;height:400px"/>
</h:panelGroup>
In the second code there is only div with specified height and width inside map-wrapper.
What could be the reason?
Thanks!
The reason is that some PF components need dimension information to render themselves on client side. When they are in a container that has display: none;, problems often occur.
I've just found a workaround:
Add a widgetVar property to your g:map component widgetVar="gmap"
In the same page, add this javascript <script type="text/javascript">gmap._render();</script>
I have 2 command buttons and one select one menu. I need to call a bean method depending on the buttons selected and the currently selected item in the menu.
<h:form id="form1">
<h:outputLabel value="menu:" />
<h:commandButton value ="en" action="#{bean.exec}" >
<f:setPropertyActionListener target="#{bean.menu}" value='en' />
</h:commandButton>
<h:commandButton value ="fr" action="#{bean.exec}" >
<f:setPropertyActionListener target="#{bean.menu}" value='fr' />
</h:commandButton>
<h:outputLabel value="id:" />
<h:selectOneMenu value="#{bean.id}">
<f:selectItems value="#{bean.idlist}" />
<f:ajax listener="#{bean.exec}" render ="form1" />
</h:selectOneMenu>
</h:form>
However, although the first button updates my properties and calls the action method, the second button gives me the following message
WARNING: FacesMessage(s) have been enqueued, but may not have been displayed
and the view doesn't get updated on the fist click. However, immediately on the second click, the properties get updated and so does the view.
How is this caused and how can I solve it?
I did see the log, however I dont understand the error: this is what it shows: form1:j_idt124: Validation Error: Value is not valid What value and where?
It's easier to identify the value if you give all input components an ID and attach a <h:message> to them as follows:
<h:outputLabel for="id" value="id:" />
<h:selectOneMenu id="id" value="#{bean.id}">
<f:selectItems value="#{bean.idlist}" />
<f:ajax listener="#{bean.exec}" render ="form1" />
</h:selectOneMenu>
<h:message for="id" />
This way you will get form1:id as label instead of form1:j_idt124. Alternatively, you can also specify the label of the input component:
<h:selectOneMenu label="id" ... />
As to the "Value is not valid" error, you will get this error when the selected value does not match any one of the available values during processing the form submit. This can in turn happen when the property behind #{bean.idlist} has incompatibly changed during processing the form submit. This can in turn happen when the bean is request scoped. Putting the bean in the view scope should fix it.
See also:
Validation Error: Value is not valid