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;
}
Related
I have some code like the below and it works, but instead of showing just a number, I want to show "number%". Here's what I have:
<h:outputtext value="#{somebean.doubleValue}">
<f:convertnumber maxfractiondigits="2">
</h:outputtext>
If I put the "%" sign inside the value property, the converter won't work (I believe because the evaluated result is not just a number), but if I put the "%" sign in other outputtext tag, one line break appears between the number and it. I don't want that.
<h:outputtext value="#{somebean.doubleValue}">
<f:convertnumber maxfractiondigits="2">
</h:outputtext>
<h:outputtext value="%"> <!--prints a new line-->
What's the best way to achieve a "xx.xx%" formatting on jsf?
Set the CSS white-space property of the common parent element to nowrap.
E.g.
<span style="white-space: nowrap;">
<h:outputText value="#{somebean.doubleValue}">
<f:convertNumber maxfractiondigits="2">
</h:outputText>%
</span>
(note: you don't necessarily need <h:outputText> for plain text)
If you are actually using this in a <h:column> (as I would initially guess), you could specify a classname for the <td> by the columnClasses attribute of the <h:dataTable>.
I am rendering a table with p:dataTable (PrimeFaces) and what I want to do is color the background of cells depending on the value of their content. This is different from coloring a row or a column -- it is the individual cell.
First a CSS problem. If I do this:
<p:column headerText="xyzzy">
<div style="background-color: green">
<h:outputText value="#{rowVar.anumber}" >
<f:convertNumber groupingUsed="true" />
</h:outputText>
</div>
</p:column>
the background color just of the content gets set, not the whole cell. In other words the padding is still the default.
Second, I want to make the style string a variable expression. I can add a function to the backing bean, but how do I access the table content in the method? Will this work?
<div style="#{bean.computeCSS(rowVar.number}">
EDIT:
I figured out a way to do the conditional part, but I still need help with the CSS part. My solution looks like:
<p:column headerText="xyzzy">
<div class="#{rowVar.anumber gt 0 ? 'colored' : ''}">
<h:outputText value="#{rowVar.anumber}">
<f:convertNumber groupingUsed="true" />
</h:outputText>
</div>
</p:column>
Although I dislike getting to fancy in EL, this has the advantage of not needed a backing bean method.
However I still only get the background color set, not the whole cell.
You can add a css class to the row and to the column too, that identifies a cell.
Use the dataTable's rowStyleClass attribute (example).
If you want to color multiple rows:
<p:dataTable value="#{bean.rows}" var="rowVar"
rowStyleClass="#{rowVar.firstCol gt 0 ? 'firstColColored' : ''}
#{rowVar.secondCol gt 0 ? 'secondColColored' : ''}">
<p:column styleClass="firstCol">...
<p:column styleClass="secondCol">
css:
.firstColColored .firstCol {
background: pink;
}
how about adding padding to your class , with px or percents...
something like this
.colored{
background-color:yellow;
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
when i put attribut mask="" in p:inputMask tag,it populate value properly like this::
<h:outputLabel for="lblPostalCode" value="#{label.postalCode}:" style="font-weight:bold" />
<p:inputMask id="lblPostalCode" style="width: 80px" value="#{certHolderDetail.selectAdd.postalCode}" mask="" />
But when i used default mask for that field like mask="99999-9999" like this
<h:outputLabel for="lblPostalCode" value="#{label.postalCode}:" style="font-weight:bold" />
<p:inputMask id="lblPostalCode" style="width: 80px" value="#{certHolderDetail.selectAdd.postalCode}" mask="99999-9999" />
it does not populate the value......:(
Please look this.
My guess would be that the value (#{certHolderDetail.selectAdd.postalCode}) does not actually conform to the pattern. Eg, perhaps it is a 5 digit address, instead of the expected 5+4?
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.
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!! :-)