I would like to display a text area which is used in two modes :
A modification mode, using p:editor
A visualization mode, where only text area is visible.
Which component would be the best choice for this visualization mode ? I have tried with :
p : editor : I don’t want the toolbar to be visible. It seems it is not possible to hide it.
p:outputTextarea : html tags generated by p:editor are visible in the textarea
h: outputText : rendering is a little different from that of p:editor and above all, as there is no vertical scroll bar, the text overflows its container.
I have also tried with p:outputTextarea for both editing and visualization modes, but I would be interessed in further tools available in p:editor.
Any idea ?
<p:panel id="panelDG">
<p:dataGrid id="pdatagrid1" layout="grid" value="#{ib.bloc.groups}" var="group" columns="#{ib.bloc.groupsSize}" rowIndexVar="status">
<!-- other components -->
<p:panel styleClass="panel-textarea">
<s:account>
<p:editor id="editor1" value="#{ib.textArea1}" rendered="#{status == 0}" maxlength="4000" controls="bold italic underline strikethrough bullets outdent indent alignleft center alignright justify undo redo" />
<p:editor id="editor2" value="#{ib.textArea2}" rendered="#{status == 1}" maxlength="4000" controls="bold italic underline strikethrough bullets outdent indent alignleft center alignright justify undo redo" />
<p:editor id="editor3" value="#{ib.textArea3}" rendered="#{status == 2}" maxlength="4000" controls="bold italic underline strikethrough bullets outdent indent alignleft center alignright justify undo redo" />
<h:panelGrid >
<p:commandButton value="Save" action="#{ib.modifyGroupText(group)}" icon="ui-icon-disk" />
</h:panelGrid>
</s:account>
<s:guest>
<h:outputText value="#{group.textArea}" escape="false"></h:outputText>
</s:guest>
</p:panel>
</p:dataGrid>
</p:panel
.panel-textarea{
height: 500px;
}
If you want to hide the toolbar of <p:editor> because a user don't have editing permissions you can simply use css.
Facelet
<p:editor styleClass="#{!login.editAccess ? 'hideToolbar' : ''}" disabled="#{!login.editAccess}" ... />
CSS
.hideToolbar .ui-editor-toolbar {
display: none;
}
Oh, I had not seen the .ui-editor-toolbar class !
Otherwise, to avoid text overflow when using h:outputText :
.h-outputText{
display:block !important;
overflow-y: auto !important;
height: 400px !important;
}
Thanks for all answers
Related
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 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;
}
jsf:
<rich:dataTable id="files" styleClass="table" headerClass="header"
value="#{file}" var="fileRecord" rendered="#{file.rowCount>0}"
rowClasses="even,odd" onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
<rich:column>
precondition:
have zebra styled table with white and gray colored rows
steps:
1. mouse hover on row,it's hovered ok
2. mouse out and it becomes white
postcondition:
table lost its "zebraness"
It's occurred bevcause of #{a4jSkin.tableBackgroundColor} evaluated to white color.
How to preserve zebra styling?
Thank you for any assistance.
should be changed to:
#{a4jSkin.rowBackgroundColor}
<rich:dataTable id="files" styleClass="table" headerClass="header"
value="#{file}" var="fileRecord" rendered="#{file.rowCount lt 0}"
rowClasses="even,odd"
onRowMouseOver="tableRowColor=this.style.backgroundColor;
this.style.backgroundColor='#dedede'"
onRowMouseOut="this.style.backgroundColor=tableRowColor">
<rich:column>
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!! :-)