i am trying to make image and text display at same line by using JSF tag. is there any way to do that? oringinal code is like following but image and text always displays in 2 lines.
<rich:modalPanel id="Busy" autosized="true" zindex="2000">
<h:outputText value="Submitting..."></h:outputText>
<h:graphicImage value="images/loading.gif" />
</rich:modalPanel>
You can try this
<rich:modalPanel id="Busy" autosized="true" zindex="2000">
<h:panelGrid columns="2">
<h:outputText value="Submitting..."></h:outputText>
<h:graphicImage value="images/loading.gif" />
</h:panelGrid>
</rich:modalPanel>
The will arrange all its child elements in a table, containing the specified number of columns (2 in this case).
h:panelGrid
The best solution is to define the line directly in the CSS properties:
<h:outputText value="Submitting..." styleClass="loading"/>
and in your CSS:
.loading {
background-image: url('images/loading.gif');
}
then, you will have to adapt your CSS class to display correctly your image.
Related
I display error messages somewhere on <p:tooltip> as follows.
<p:inputText id="text" value="#{bean.text}" required="true"/>
<p:tooltip for="text">
<p:message for="text"/>
</p:tooltip>
Although it displays an error message the given tooltip, an empty/unnecessary tooltip is shown, when there is no error as can be seen in the following picture - beside the bottom right corner of the text box.
How to get rid of such empty tooltips? (I tried someway but it did not work)
It can be done by checking for an error message in the list java.util.List<FacesMessage> that can be obtained by using facesContext.messageList.
The rendered attribute of <p:tooltip> can be set based on the error message/s found in the list for the associated component/s something along the line.
rendered="#{not empty facesContext.getMessageList('clientId')}"
A working code snippet :
<h:form id="form">
<p:panel id="panel">
<p:inputText id="text" value="#{bean.text}" required="true"/>
<p:tooltip for="text" rendered="#{not empty facesContext.getMessageList('form:text')}">
<p:message for="text"/>
</p:tooltip>
<p:commandButton value="Submit" update="panel"/>
</p:panel>
</h:form>
Or by using component binding. Such as,
<p:inputText id="text" binding="#{inputComponent}" value="#{bean.text}"/>
<p:tooltip for="text" rendered="#{not empty facesContext.getMessageList(inputComponent.clientId)}">
<p:message for="text"/>
</p:tooltip>
Or even
<p:inputText id="text" binding="#{inputComponent}" value="#{bean.text}"/>
<p:tooltip for="text" rendered="#{not inputComponent.valid}">
<p:message for="text"/>
</p:tooltip>
The last two cases are useful especially when the (input) component is enclosed within an iterating component like a <p/h:dataTable>, <p:dataGrid>, <p:dataList> (or even <ui:repeat>) where the uniqueness of enclosing components is determined based on the iterating row index of an iterating component such as, form:dataTable:0:text, form:dataTable:1:text, form:dataTable:2:text... and so on
p:tooltip should have a "rendered" attribute, set it to false
from documentation:
rendered : default=TRUE - value to specify the rendering of the
component, when set to false component will not be rendered.
Source: http://courses.coreservlets.com/Course-Materials/pdf/jsf/primefaces/users-guide/p-tooltip.pdf
I want to render a panelGrid with a fixed number of columns but elements are loaded from a list. The code should be as follows:
<h:panelGrid columns="3">
<h:outputText value="Header 1"/>
<h:outputText value="Header 2"/>
<h:outputText value="Header 3"/>
<ui:repeat value="#{bean.collection}" var="obj">
<p:panel>
<h:outputText value="#{obj.value}"/>
</p:panel>
</ui:repeat>
</p:panelGrid>
The problem is this code is not rendering as I expected, because all panels are enclosed in the first TD generated by panelGrid, and I want a row break every 3 elements. It seems all repeat block is executed prior the rendering. I'm sure I can obtain this behaviour. What I'm doing wrong?
Thanks
ui:repeat is a component and it is part of the component tree. To create what you are planning try using tag handler c:forEach instead.
<c:forEach items="#{bean.collection}" var="obj">
<p:panel>
<h:outputText value="#{obj.value}"/>
</p:panel>
</c:forEach>
I've inserted a Primefaces Slider on my page with very basic settings, the problem is once I click on its button, it doesn't stop moving with mouse. it doesn't a matter where in the page the mouse pointer is. The Slider button follows the mouse position to right or left. does any body an idea how to solve the problem?
<h:outputLabel styleClass="form-label-top-right" for="area">Area:
<h:outputText id="output" value="#{formbean.selectedArea}"/> Km
<h:inputHidden id="area" value="#{formbean.selectedArea}" />
<p:slider animate="true" display="output" minValue="0" maxValue="15" step="3" id="areaSlider" for="area" style="margin-top:6px; cursor: pointer" />
</h:outputLabel>
I think it is the way you used h:outputLabel to contain these other tags not allowing the mouseup event to bubble up. Use a h:panelGrid with four columns instead.
For example:
<h:panelGrid columns="4">
<h:outputLabel styleClass="form-label-top-right" for="output" value="Area:" />
<h:panelGroup>
<h:outputText id="output" value="#{formbean.selectedArea}"/>
<h:outputText value="Km"/>
</h:panelGroup>
<h:inputHidden id="area" value="#{formbean.selectedArea}" />
<p:slider animate="true" display="output" minValue="0" maxValue="15" step="3" id="areaSlider" for="area" style="margin-top:6px; cursor: pointer" />
</h:panelGrid>
Problem resolved. It was the "FireQuery" Plugin for FireFox which caused the problem. uninstalling that
Can any one help me to display a label in a single line?
In my UI there is a field called check funding period
but it is getting displayed in 3 lines like:
check
funding
period
what can i do so that it will display like
check funding period (in single line)
in jsf?
Not really a JSF question, just a CSS question.
Ensure that the label gets the CSS style white-space:nowrap; either via the style or styleClass attributes.
Looks to me like you have your output in a column of a table and have not made sure the column is wide enough. Use the columnClasses attribute of the dataTable to specify a css column style and make sure it is wide enough for your output. ie:
<rich:dataTable id="curfDataTable"
columnClasses="column40percent,column20percent,column40percent"
rowClasses="rowFirst,rowSecond" value="#{accessCurfMBean.unowned}"
var="curf" styleClass="tableInfo">
Much the same for when using the panelGrid layout.
<h:panelGrid id="panel" columns="2" border="1" columnClasses="column40percent,column60percent">
and in your css:
.column20percent {
width: 20%;
}
.column40percent {
width: 40%;
}
.column60percent {
width: 60%;
}
What I usually do is I wrap them in a h:panelGrid tag like this:
<h:panelGrid columns="3">
<h:outputText value="check" />
<h:outputText value="funding" />
<h:outputText value="period" />
</h:panelGrid>
If the html output from this is too messy for you, then I would consider doing like this:
<h:outputText value="#{Messages.check Messages.funding Messages.period}" />
Or simply:
<h:outputText value="Check funding period" />
As I said in the comment tho it really depends on what tags your using and what your wrapping them in. This may just be a simple CSS problem.
Another possible easy solution for this problem is the <nobr> tag.
Put <nobr> before your label area, and </nobr> at the end of it..
<nobr>
<h:outputText value="check" />
<h:outputText value="funding" />
<h:outputText value="period" />
</nobr>
Your problem solved!! :-)
I have the following code:
<h:outputText id="dateVal" value="#{items.date}">
<f:convertDateTime pattern="MMM-yy" />
</h:outputText>
How can I display the value #{items.date} in bold?
Just do:
<h:outputText value="AAAAA" style="font-weight:bold"/>
and this code will output the following html:
<span style="font-weight:bold">AAAAA</span>
How about enclosing it in a span to make it bold or adding a css style and applying it.
<span style="font-weight:bold">My Value Bold!</span>
or rather
<h:outputText value="AAAAAAA" style="font-weight:bold" />
You should use styleClass rather than style for easier change and maintenance
<h:outputText value="#{bundle.Label_place}" styleClass="recordLabel"/>
with a style defined in a shared style sheet you can use everywhere
.recordLabel {
font-weight:bold;
}