datalist - linebreak if text too long

[typhon]

Hello,

I'm using a datalist to display some tasks. If I place a p:outputLabel in the page the text fits automatic to the pagesize. When I put the text inside of the p:dataList i see only one line and the text is cut off.

Is there a way to display the whole text with linebreaks? I tried some css without sucess...

Code: Select all

                                    <h:form>
					<p:dataList id="dataList" value="#{userBean.changedTasks}" var="task" pt:data-inset="true">
						<p:panel header="#{task.tid}, #{task.customer}">
							<p:outputLabel value="#{task.notes}" />
						</p:panel>
					</p:dataList>
				</h:form>

thx and br
typhon

[smithh032772]

it's a little hard to understand your question, since you only provided 'one' XHTML scenario.

so, what does the HTML rendered in your browser for the following?

Code: Select all

               <p:dataList id="dataList" value="#{userBean.changedTasks}" var="task" pt:data-inset="true">
                  <p:panel header="#{task.tid}, #{task.customer}">
                     <p:outputLabel value="#{task.notes}" />
                  </p:panel>
               </p:dataList>

and what is the HTML rendered in your browser for the following?

Code: Select all

               <p:dataList id="dataList" value="#{userBean.changedTasks}" var="task" pt:data-inset="true">
                  <p:panel header="#{task.tid}, #{task.customer}">
                     <h:outputText value="#{task.notes}" />
                  </p:panel>
               </p:dataList>

and what is the HTML rendered in your browser for the following?

Code: Select all

               <p:dataList id="dataList" value="#{userBean.changedTasks}" var="task" pt:data-inset="true">
                     <h:outputText value="#{task.notes}" />
               </p:dataList>

[typhon]

Thx for reply...

advice 1: if the text to long for the line the text is cut off at the end like "bla bla bla b"

advice 2: similar to the first approach but the font-size is smaller and at the end there are three dots like "bla bla bla b..."

advice 3 has the same result like the 2nd...

I've did a workaround with a dataTable but in this case my growl doesn't work anymore so I've to put p:messages instead of the growl..

[smithh032772]

[OFF-TOPIC] i have had to replace p:growl with p:messages on at least one of my PRIMEFACES_MOBILE pages, too, but since i have read some other forum topics here, I will take a closer look to get p:growl working on any/all PRIMEFACES_MOBILE pages in my app.

still waiting for the HTML rendered in your browser.

EDIT: I fixed the p:growl issue by removing p:defaultCommand from my PRIMEFACES_MOBILE page. I use p:defaultCommand in a lot of my HTML_BASIC pages, so as I am developing PRIMEFACES_MOBILE pages for all/most of the HTML_BASIC pages, I need to remember to avoid copy/pasting p:defaultCommand on PRIMEFACES_MOBILE pages.

[typhon]

do you mean the source code form browser?

Code: Select all

<form id="fileUpload:fileUploadForm" name="fileUpload:fileUploadForm" method="post" action="/SageViewer/pages/view.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="fileUpload:fileUploadForm" value="fileUpload:fileUploadForm" />
<div id="fileUpload:fileUploadForm:j_idt45" class="ui-panel-m ui-corner-all" data-widget="widget_fileUpload_fileUploadForm_j_idt45"><div class="ui-panel-m-titlebar ui-bar ui-bar-inherit"><h3>HINWEIS!</h3></div><div class="ui-panel-m-content ui-body ui-body-inherit"><p><label id="fileUpload:fileUploadForm:j_idt46" class="ui-outputlabel ui-widget" style="color: red;">Bei einem neuem Upload werden alle bestehende Vorgänge gelöscht! Auch geänderte Notizen gehen verloren und müssen vorher im Sage gespeichert werden!</label></p></div></div><script id="fileUpload:fileUploadForm:j_idt45_s" type="text/javascript">$(function(){PrimeFaces.cw("Panel","widget_fileUpload_fileUploadForm_j_idt45",{id:"fileUpload:fileUploadForm:j_idt45",widgetVar:"widget_fileUpload_fileUploadForm_j_idt45"});});</script>
					<br />
					<br /><div id="fileUpload:fileUploadForm:j_idt48" class="ui-panel-m ui-corner-all" data-widget="widget_fileUpload_fileUploadForm_j_idt48"><div class="ui-panel-m-titlebar ui-bar ui-bar-inherit"><h3>Vorgänge mit geänderten Notizen:</h3></div><div class="ui-panel-m-content ui-body ui-body-inherit"><p><ul id="fileUpload:fileUploadForm:dataList" data-inset="true"><li><div id="fileUpload:fileUploadForm:dataList:0:j_idt49" class="ui-panel-m ui-corner-all" data-widget="widget_fileUpload_fileUploadForm_dataList_0_j_idt49"><div class="ui-panel-m-titlebar ui-bar ui-bar-inherit"><h3>113177, Test Kunde 1</h3></div><div class="ui-panel-m-content ui-body ui-body-inherit"><p><label id="fileUpload:fileUploadForm:dataList:0:j_idt50" class="ui-outputlabel ui-widget">This is a long text an need a linebreak..... but there is no br so I cant read the text....</label></p></div></div><script id="fileUpload:fileUploadForm:dataList:0:j_idt49_s" type="text/javascript">$(function(){PrimeFaces.cw("Panel","widget_fileUpload_fileUploadForm_dataList_0_j_idt49",{id:"fileUpload:fileUploadForm:dataList:0:j_idt49",widgetVar:"widget_fileUpload_fileUploadForm_dataList_0_j_idt49"});});</script></li><li><div id="fileUpload:fileUploadForm:dataList:1:j_idt49" class="ui-panel-m ui-corner-all" data-widget="widget_fileUpload_fileUploadForm_dataList_1_j_idt49"><div class="ui-panel-m-titlebar ui-bar ui-bar-inherit"><h3>105819, Neuester Testunde </h3></div><div class="ui-panel-m-content ui-body ui-body-inherit"><p><label id="fileUpload:fileUploadForm:dataList:1:j_idt50" class="ui-outputlabel ui-widget">This is a long text an need a linebreak..... but there is no br so I cant read the text....</label></p></div></div><script id="fileUpload:fileUploadForm:dataList:1:j_idt49_s" type="text/javascript">$(function(){PrimeFaces.cw("Panel","widget_fileUpload_fileUploadForm_dataList_1_j_idt49",{id:"fileUpload:fileUploadForm:dataList:1:j_idt49",widgetVar:"widget_fileUpload_fileUploadForm_dataList_1_j_idt49"});});</script></li></ul><script id="fileUpload:fileUploadForm:dataList_s" type="text/javascript">$(function(){PrimeFaces.cw("DataList","widget_fileUpload_fileUploadForm_dataList",{id:"fileUpload:fileUploadForm:dataList",widgetVar:"widget_fileUpload_fileUploadForm_dataList"});});</script></p></div></div><script id="fileUpload:fileUploadForm:j_idt48_s" type="text/javascript">$(function(){PrimeFaces.cw("Panel","widget_fileUpload_fileUploadForm_j_idt48",{id:"fileUpload:fileUploadForm:j_idt48",widgetVar:"widget_fileUpload_fileUploadForm_j_idt48"});});</script><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="3197783683272647937:-8181248343904166796" autocomplete="off" /><input type="hidden" name="javax.faces.RenderKitId" value="PRIMEFACES_MOBILE" />
</form></div><div data-role="footer">
                <p style="text-align: center; font-size: x-small;">SageViewer BETA</p></div></div>

or a screenshot from the displayed output?

[smithh032772]

okay, i guess this is the HTML

Code: Select all

<p><label id="fileUpload:fileUploadForm:dataList:0:j_idt50" class="ui-outputlabel ui-widget">This is a long text an need a linebreak..... but there is no br so I cant read the text....</label></p>

for

Code: Select all

 <p:outputLabel value="#{task.notes}" />

so, what happens when your code looks like this below?

Code: Select all

               <p:dataList id="dataList" value="#{userBean.changedTasks}" var="task" pt:data-inset="true">
                     <h:outputText value="#{task.notes}" style="white-space: normal !important"/>
               </p:dataList>

send screen capture, please.

[typhon]

for

Code: Select all

<p:dataList id="dataList" value="#{userBean.changedTasks}" var="task" pt:data-inset="true">
	<p:panel header="#{task.tid}, #{task.customer}">
		<p:outputLabel value="#{task.notes}" />
	</p:panel>
</p:dataList>

capture:

[img]
https://www.dropbox.com/s/bj9s4eekj4ylj39/1.PNG
[/img]

with

Code: Select all

<p:dataList id="dataList" value="#{userBean.changedTasks}" var="task" pt:data-inset="true">
	<p:panel header="#{task.tid}, #{task.customer}">
		<h:outputText value="#{task.notes}" style="white-space: normal !important"/>
	</p:panel>
</p:dataList>

it works perfect:

[img]
https://www.dropbox.com/s/s9qg07anx8idom5/2.PNG
[/img]

thx a lot!

br