I have a tooltip set for an h:selectOneRadio which is correctly displayed in FF and Chrome but not in IE(9).
In the latter case what appears is a tooltip which goes beyond the left margin and just to the right margin of the page.
Here is how it appears in FF/Chrome:
and here in IE
Here is the code:
<tr>
<td>
<h:outputLabel value="#{msg.subscriptionFormFieldSubscriptionType}:" />
</td>
<td>
<h:selectOneRadio id="subscriptionType"
value="#{detailModel.afterObject.subscriptionType}"
<f:selectItems value="#{detailModel.subscriptionTypeValues}" />
<rich:tooltip id="tt1" styleClass="tooltip" for="detailForm:subscriptionType" layout="block" >
<span style="white-space: nowrap">
<h:outputText value="#{msg.subscriptionToolTipForSubscriptionType}" escape="false"/>
</span>
</rich:tooltip>
</h:selectOneRadio>
<h:messages for="subscriptionType" style="color:red; font-size:12px;" />
</td>
</tr>
I took the richfaces showcase sample (which works correctly in IE too) as sample, so I don't know where the problem is. Any idea/hint?
If more information is needed, please let me know.
Problem found: layout="block" was causing the problem.
Related
Now we put a couple of primefaces dialogs in datatable rows. This worked so far, but I want to move them out of the datatable.
Because there is always only one instance shown to the user of a particular dialog, I thought of updating it's values via Javascript before popping it up to the user. This would be the case for simple dialogs that only contain a couple of components and the information is already available on the client side.
What it used to be so far. (It's in HTML, not JSF, because I don't have the JSF code right now)
<table>
<tr>
<td>
<a onClick="show('dialog');" />
<div id='dialog'> <!-- the dialog -->
<input type="text" name="field" value="value" />
</div>
</td>
</tr>
</table>
e.g. what I want to achieve:
<table>
<tr>
<td>
<a onClick="updateDialog('dialog',{'field', 'value'}); show('dialog');" />
</td>
</tr>
</table>
<div id='dialog'> <!-- the dialog -->
<input type="text" name="field" value="value" />
</div>
Do you think it's feasible, or do you think there is already similar solutions out there in the wild? THanks.
Sounds like you want something like this... just make sure, the bean you store the instance to edit in survives the request. Make sure to read about partial processing and partial rendering in the PrimeFaces documentation which you can download for free: http://www.primefaces.org/documentation
<h:form id="tableForm">
<p:datatable value="#{carBean.cars}" var="car" ...>
<p:column>
<p:commandButton value="edit" action="#{carBean.edit(car)}" process="#this" update=":editForm" oncomplete="PF('carDialog').show();"/>
</p:column>
...
</p:datatable>
</h:form>
<h:form id="editForm">
<p:dialog widgetVar="carDialog" rendered="#{carBean.carToEdit ne null}">
<p:inputText value="#{carBean.carToEdit.brand" placeholder="brand" ... />
...
</p:dialog>
</h:form>
Before my application was using primefaces 3.4.2 version at that time selectonemenu component width was not adjusting to selectItems's label text and was fixed according to defined field but after moving to primefaces 5 version all selectonemenu component width by default now adjusting to selectItems's label text.SelectItems's value has been retrieved from bean and it looks ugly on UI that again and again selectonemenu component changing its width according to selectItems's label value.
<p:outputPanel id="groupId">
<fieldset class="noBorderFieldsetclass">
<legend class="noBorderFiledSetLegendclass">Detail</legend>
<table width="100%">
<tr>
<td colspan="9"><p:spacer height="10"></p:spacer></td>
</tr>
<tr>
<td styleClass="titlesClass">Title1:</td>
<td colspan="8">
<p:selectOneMenu id="selectOneMenuId1" style="width:130px;" value="#{bean.selectOneMenuId1Value}" immediate="true">
<f:selectItem itemLabel="Select" itemValue="" />
<f:selectItems value="#{bean.title1List}" var="title1" itemLabel="#{title1.label}" itemValue="#{title1.labelValue}" />
<p:ajax update="selectOneMenuId2 selectOneMenuId3 selectOneMenuId4 selectOneMenuId5" listener="#{bean.title1Listener}" process="#this"/>
</p:selectOneMenu>
</td>
</tr>
<tr><td styleClass="titlesClass">Title2:</td>
<td>
<p:selectOneMenu id="selectOneMenuId2" style="width: 130px;" value="#{bean.selectOneMenuId2Value}">
<f:selectItem itemLabel="Select" itemValue="" />
<f:selectItems value="#{bean.title2List}" var="title2" itemLabel="#{title2.label}" itemValue="#{title2.labelValue}" />
<p:ajax update="selectOneMenuId3 selectOneMenuId4 selectOneMenuId5" listener="#{bean.title2Listener}" process="#this"/>
</p:selectOneMenu>
</td>
---
---
</tr>
</table>
Please let me know how can I make selectonemenu component width fixed and not to adjust according to values of selectItems retrieved from bean.I can't set selectonemenu component width globally because each selectonemenu component width is defined according to screen layout.
I am facing this problem where when I leave everything blank for inputText, click on the Save button, one of the inputText field will be auto set with 0.000000. I have been looking at this for sometime but I still couldn't figure out what is wrong with it. By right, it should remain blank.
<tr>
<td><p:commandButton type="button"
value="#{msg.cr1002_command_save}" onclick="confirmation.show()"
id="cr1002_command_save" styleClass="commandButton">
</p:commandButton> <p:confirmDialog id="confirmDialog"
message="#{msg.cr1002_prompt_confirm_save}" severity="alert"
widgetVar="confirmation">
<p:commandButton id="confirm" value="OK"
oncomplete="confirmation.hide()"
action="#{pc_Cr1002.doCr1002_command_saveAction}" ajax="false"
styleClass="commandButton" />
<p:commandButton id="decline" value="Cancel"
onclick="confirmation.hide()" type="button"
styleClass="commandButton" />
</p:confirmDialog>
</td>
</tr>
<tr>
<td><h:outputText styleClass="outputText"
id="cr1002_output_sample_value"
value="#{msg.cr1002_output_sample_value}"></h:outputText>
</td>
<td></td>
<td><p:inputText styleClass="inputTextRefresh"
id="cr1002_input_sample_value" onchange="this.form.submit()"
valueChangeListener="#{pc_Cr1002.handleCr1002_input_sample_valueValueChange}"
style="text-align: right"
value="#{pc_Cr1002.w_currency.sample_value}">
<f:convertNumber pattern="##0.000000" />
</p:inputText>
</td>
<td></td>
<td><p:message styleClass="message_200px"
id="cr1002_error_sample_value" for="cr1002_input_sample_value"
display="text"></p:message>
</td>
<td></td>
</tr>
#{pc_Cr1002.w_currency.sample_value}
I suppose your field sample_value is a primitive (float may be) and not a wrapper class (Float)
The default value for primitives on instance level is 0 or 0.0 whereas that of wrapper classes is null.
So, if these assumptions are correct, and changing the data type does not harm you, this might solve your issue.
Hi i am working with js2+ primefaces here is my code to block UI
<table>
<h:form id="main">
<tr>
<p:growl --->
---
<p:dashboard id="board" model="#{adminD.userProfl}" disabled="true">
<p:panel id="adminActivity" header="Admin Activities">
<table id="hor-minimalist-b" >
<tbody>
<tr>
<td>
<h:commandLink action="#{photoValidation.ooDirectory()}" name="submit" type="submit" id="convertPhotos">
<h:outputText value="Convert All Photos in Databse "/>
<f:ajax execute=":main:adminActivity" render=":main:growl"/>
</h:commandLink>
</td>
</tr>
</tbody>
</table>
</p:panel>
</p:dashboard>
<p:blockUI block=":main:board" trigger=":main:convertPhotos">
LOADING<br />
<p:graphicImage value="#{facesContext.externalContext.requestContextPath}/resources/images/ajax-loader.gif"/>
</p:blockUI>
here board is dashboard id main is form id
also implemented managed bean with thread.sleep of 5 seconds
Remove all the :main: prefixes , since all this resides inside the same h:form , there no need to add that main prefix
Use
<p:blockUI block="board" trigger="convertPhotos">
Try changing h:commandLink to p:commandLink:
<p:commandLink actionListener="#{photoValidation.ooDirectory()}" update=":main:growl" id="convertPhotos"><h:outputText value="Convert All Photos in Databse "/></p:commandLink>
Can you try this code?
<p:blockUI block="board" trigger="adminActivity:convertPhotos">
It is only tipp but you can find component element by firebug or another web tool in browser.
Whats the advantage is JSF 2 Panel grid vs an HTML table?
e.g.
<h:panelGrid columns="1">
<h:outputText value="Hello"/>
</h:panelGrid>
vs
<table>
<tr>
<td>
<h:outputText value="Hello"/>
</td>
</tr>
</table>
"h:panelGrid" tag in JSF is used to generate HTML table tags. It places JSF components in rows and columns layout. The Advantage of using it is you do not have to type all those html tags.
For example, here you have to type all these html tags in your coding,
<table>
<tbody>
<tr>
<td>
Enter a Phone number :
</td>
<td>
<h:inputText id="input1" value="#{bean.input1}"
size="20" required="true"
label="Number" >
<f:convertNumber />
</h:inputText>
</td>
<td>
<h:message for="input1" style="color:red" />
</td>
</tr>
</tbody>
</table>
but the same thing can be done using "h:panelGrid" by typing the following,
<h:panelGrid columns="3">
Enter a Phone number :
<h:inputText id="input1" value="#{bean.input1}"
size="20" required="true"
label="Number" >
<f:convertNumber />
</h:inputText>
<h:message for="input1" style="color:red" />
</h:panelGrid>
JSF doc gives more details, and panelGrid has got some limitations too.
It would be very easy to align various panels and your can have JSF form control () within the panel, without much help from UI developer.
One of the limitations with PanelGrid is : It would not be easy to apply CSS styles. You need look for alternate solutions. But with standard html tags it would be easy to apply CSS styles. JSF2 Primefaces gives themes but I could not avoid CSS styles in a real time application development.
But with PanelGrid you can use almost any JSF control that fits in the rendered html of PanelGrid.