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
Related
I have JSF data table and only one column has column header.
I need to hide the column with header text based on the condition and when I do that the entire header row shrinks because the other columns don't have header text.
To prevent this, I need to set 'empty' string and I tried a few tricks but nothing seem to work.
<p:dataTable ....>
<p:column headerText=" " >
How do I set empty string headerText attribute?
Thx in advance.
Depending on your Primefaces version you could use this code to force the creation of the html element
<p:dataTable ....>
<p:column headerText=" " >
With early version this should create the div but make it very small, so you can add css style to adjust to your wish, something like
.ui-datatable thead th {
min-height: xx px;
min-width: yy px;
}
I think you can solve your problem event with only the second part, so only with css.
I am developing a dynamic Datatable with Primefaces 5. I have set the table width to auto. This is really nice. My Column uses only the needed width, which is perfect. But I also use paginator and a Table header. So my table looks like this:
<p:dataTable var="row"
editingRow="#{row.status == CommonConstant.ROWSTATUS_EDIT}"
tableStyle="width:auto"
value="#{componentBean.componentData[componentId].lazyModel}"
id="#{componentId}"
editable="true" scrollable="false" scrollHeight="100%"
resizableColumns="true"
paginator="true"
paginatorPosition="top"
rowsPerPageTemplate="10 25 50 100"
lazy="true">
<f:facet name="header">
<p:outputPanel style="text-align:right">
<h:commandLink rendered="#{fn:indexOf(componentBean.componentData[componentId].loadedData.actions, CommonConstant.ACTIONTYPE_EXCEL) >= 0}" >
<img border="0" src="img/excel.png" width="24"/>
<p:dataExporter type="xls" target="#{componentId}" fileName="#{appDialogId}" />
</h:commandLink>
<h:commandLink rendered="#{fn:indexOf(componentBean.componentData[componentId].loadedData.actions, CommonConstant.ACTIONTYPE_PDF) >= 0}">
<img border="0" src="img/pdf.png" width="24"/>
<p:dataExporter type="pdf" target="#{componentId}" fileName="#{appDialogId}"/>
</h:commandLink>
</p:outputPanel>
<p:outputPanel>
<h:outputText value="#{componentBean.componentData[componentId].loadedData.appdialogid}" />
</p:outputPanel>
</f:facet>
...
</p:dataTable>
How can I force the Header and the paginator to have the same width than the table?
For plain data table try this:
.ui-datatable {
display: table;
}
.ui-datatable table {
table-layout: auto !important;
}
I haven't tried resizable or anything else yet.
I am assuming you are setting the auto width on the datatable as I can recreate your problem.
Try this:
set the style to min-width: $px on the div with the ui-datatable class to a value that makes your table happy
remove the auto width from the table and add table-layout: auto ! important to the table element so the colums still auto size somewhat but relative to the header.
Note: The width on the table element needs to remain as 100%, its default, so it fills the header.
The below is not really relevant but still 'good to know'.
All datatables in Primefaces 5 use table-layout: fixed. You can override to match the older Primefaces model using css.
.ui-datatable table, .ui-datatable-resizable table {
table-layout: auto !important;
}
.ui-datatable-scrollable table {
table-layout: fixed !important;
}
Scrollable data-tables need to remain as fixed.
It may help if you remove the outputPanels and use the data exporter facet for the links. If you prefer the links in the header put them in a span.
Priemfaces example
<f:facet name="{Exporters}">
<h:commandLink> ...
</h:commandLink> ...
</f:facet>
Enclose your datatable in a panelGrid
<p:panelGrid id="forautowidth" columns="1">
--- Data Table Here ---
</p:panelGrid>
This has a somewhat annoying box around the table, but that is a good deal better then the overshooting paginator. Plus it works well as the browser page size changes
I have a data table in my application. One column have heavy data which increasing the width of table.
I want to split the data to two or more lines in that column.
I have tried by setting width for that column but data did't split and doesn't show total data.
<p:column headerText="#{msgs['exception.label.exceptionMsg']}" width="200">
<h:outputText value="#{exception.exceptionMsg}"/>
</p:column>
How can i split the data?
The .ui-datatable tbody td has a default style of white-space: nowrap, meaning that long texts won't wrap. You want to override this style by setting it back to white-space: normal.
E.g.
<p:column width="200" styleClass="wrap">
with this CSS
.ui-datatable tbody td.wrap {
white-space: normal;
}
See also:
How do I override default PrimeFaces CSS with custom styles?
This is my solution. It's very simple.
<p:column style="white-space : normal ; width: 315px">
<h:outputText value="T h i s i s a v e r y L a r g e T e x t">
</h:outputText>
</p:column>
I used the following solution after going through an answer by BalusC to some other related question.
I use this in CSS:
.ui-datatable tbody td.wrap {
white-space: normal;
word-wrap: break-word;
}
And this with my columns:
<p:column style="text-align: left" width="38" styleClass="wrap">
This handles data with space and without spaces -both.
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;
}
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!! :-)