I am using primefaces 3.2 and I have used escape=false for the outputText to display the output. This is not working for me.
val = "<ol><li>sfsfsd</li><li>fgsdsdg</li></ol>"
<h:outputText escape="false" value="#{dummyBean.val}" />
It is not displaying the numbers instead I am getting a dot (.) on display.
I am gettting output like :
. sfsfsd
. fgsdsdg
But the expected output is :
1.sfsfsd
2.fgsdsdg
A weird idea:
what if the html is indeed escaped but you have some styling issue which hides the numbers before the dots. I would try to add some left padding either to the printed list
<ol style="padding-left: 100px;">
<li>First</li>
<li>Second</li>
</ol>
or to the span itself
<h:outputText escape="false" value="#{dummyBean.val}" style="padding-left: 100px;"/>
and see what happens.
What you're looking for is just a different way to style an ordered list.
You just need to add this style
ol {
list-style-type: decimal;
}
Related
I want to create a grid like this:
Element1 Element2 Element3
Element4 Element5 Element6
I have the following code:
<ui:repeat value=#{beans.myElementList} var="element" varStatus="i">
<b:row rendered=#{i.index%3==0}>
<b:column medium-screen="4">
#{element.display}
</b:column>
</b:row>
</ui:repeat>
The result of my code:
Element1
Element4
How to solve this problem?
<b:panelGrid> to the rescue:
<ui:repeat value=#{beans.myElementList} var="element">
<b:panelGrid columns="3" size="md">
#{element.display}
</b:panelGrid>
</ui:repeat>
<b:panelGrid> is inspired by the standard <h:panelGrid>, which renders an HTML table. Similarly, <b:panelGrid> renders a table consisting of Bootstrap rows and columns. Simply put everything you want to display into the panel grid. BootsFaces automatically detects when to render a new row.
The use case I originally had in mind is a form. More often than not, such a form is a repetition of identical lines: label, input field, error message. <b:panelGrid> allows you to create tabular forms like this with minimal effort.
Also see the documentation of <b:panelGrid>.
Addition until BootsFaces 1.2.0 is released:
Looking at the documentation, I wasn't happy what I saw. So I've corrected and updated it. Until BootsFaces 1.2.0 is released, also see the documentation of the developer showcase.
Try the below code.
The first ui:repeat renders <row> for each 3 elements, the second one renders elements (within <column>) in groups of 3 elements each.
<ui:repeat value="#{beans.myElementList}" step="3" varStatus="i" >
<b:row>
<ui:repeat value="#{beans.myElementList}" var="element"
step="1" offset="#{i.index}"
size="#{i.index + 3 le beans.myElementList.size() ? i.index + 3 : beans.myElementList.size() }"
varStatus="j" >
<b:column medium-screen="4">
#{element.display}
</b:column>
</ui:repeat>
</b:row>
</ui:repeat>
I'd like to put a linebreak in a tooltip so that it displays like:
Nom: value1
Quality: value2
I tried:
1.
<h:outputText title="Nom: #{cntc.value1}<br/>Quality: #{cntc.value1}" />
2.
<h:outputText title="Nom: #{ (''.concat(cntc.value1).concat('<br/>')concat('Quality: ').concat(cntc.value2)}" />
None of them worked for me. It seems that the <br/> isn't being interpreted.
How can I achieve this?
It's not a good idea to name the problem "Concatenating strings in EL" if your issue is with neither of those things. You want to create a multi-line title, that's an HTML problem.
Title only accepts text so <br/> will not work but you can put a line break (
) in there:
<h:outputText value="#{cntc.mail }" title="Nom: #{cntc.nom}
Qualite: #{cntc.qualite}" />
Note that this may not work in every browser.
I have a data table in my application, I fix the columns width as 200. If i print small line in datatable column means it prints correct format. If i print lengthy line in the datatable column means, it cant wrap it out. how can i wrap the text in data table column.
Problem Description
You can control word wrapping by CSS word-wrap property. Inside tables, this only requires the table-layout property to be set to fixed, so that columns with a fixed width don't auto-expand when their content is larger.
E.g.
.fixed-size {
table-layout: fixed;
word-wrap: break-word;
}
and
<p:dataTable ... styleClass="fixed-size">
The below worked for me in Chrome not in IE
.preformatted {
white-space: pre-wrap;
word-break: break-all;
}
<p:column>
<h:outputText value="#{bean.txt}" styleClass="preformatted" />
</p:column>
My sollution is to apply word-break style to column. Just like:
<p:column id="accountsMaskColumn"
headerText="#{msg['mr.settings.headers.accountMask']}"
filterBy="#{item.accountMask}"
sortBy="#{item.accountMask}"
style="word-break: break-word">
<h:outputText value="#{item.accountMask}"/>
</p:column>
Hope someone find this useful
I have a JSF data table that is displaying data based off a search successfully. However, I'm not sure how to selectively bold certain text data in a particular column.
So, for instance, I would like this text...
Here is some text that would be inside the h:column
to show up like this on the page...
Here is some text that would be inside the h:column
Here's what my data table looks like
Results:
<h:dataTable var="results"
value="#{logSearcherBean.results}"
border="1">
<h:column>#{results.logName}</h:column>
<h:column>#{results.matchLine}</h:column>
</h:dataTable>
You could either homebrew an EL function which manipulates the column value and returns the desired HTML,
<h:outputText value="#{my:highlight(results.logName, logSearcherBean.query)}" escape="false" />
(note that this is due to escape="false", which is mandatory to present HTML literally, also sensitive to XSS attacks if the logName is a value which is fully controlled by the enduser)
Or grab JavaScript/jQuery which manipulates the returned HTML, see also this related question: Highlight a word with jQuery.
Hi all,
<p:column id="lastName"
headerText="Last Name">
<h:outputText value="#{person.lastName}" style="#{myBean.getStyle(person.lastName)}"/>
</p:column>
And in the bean:
public String getStyle(String str) {
return str.equals(keyword) ? "background-color: yellow" : "";
}
All best and happy coding!
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;
}