I have a project with spark template and another one based on verona.
In both projects I have the same problem using p:dataScroller.
The appearance is not perfectly integrated with the templates.
The origin of the problem arises from the div tags that the data scroller adds around the iterated object (their css maybe ruin the css layout of the premium template).
I can't find a way to workaround this problem because:
-there are no onchange or oncomplete methods for p:dataScroller to try to launch a script to adjust the appearance of the page
-if I add a <p:ajax> (to try to launch a script to adjust the appearance of the page) inside p:dataScroller I get this error:
Unable to attach behavior to non-ClientBehaviorHolder parent
This is my page structure in the project with verona template:
Code: Select all
<ui:define name="content">
<div class="ui-g dashboard">
<ui:repeat id="repeatId" value="#{myBean.elementList}" var="iterated" varStatus="status">
<div class="ui-g-12 ui-md-12 ui-lg-12">
<div class="ui-g card overview-box overview-box-1">
<div class="ui-g-3 overview-box-icon">
<p:graphicImage value="#{request.contextPath}/resources/myproject/images/icon-paper.png" library="verona-layout" />
</div>
<div class="ui-g-9" style="text-align:left">
<span class="overview-box-count"><a href="#{iterated.urlLink}" target="_blank"><u>#{iterated.title}</u></a></span>
<span class="overview-box-name"><a href="#{iterated.urlLink}" target="_blank"><font color="black">Some text</font> #{myBean.textExample} <font color="black">-</font> #{myBean.someText} <font color="black">of</font> #{iterated.fullDomainName}</a></span>
<a href="#{iterated.urlLink}" target="_blank"><span class="overview-box-rate" >Some text example: #{myBean.someText} another text: #{myBean.otherText}</span></a>
</div>
</div>
</div>
</ui:repeat>
</div>
</ui:define>
In this example with the ui:repeat all look fine.
But if I change the ui:repeat with the p:dataScroller there are some imperfections in the appearance of the page.
Code: Select all
<ui:define name="content">
<div class="ui-g dashboard">
<p:dataScroller value="#{myBean.elementList}" var="iterated" chunkSize="5">
<div class="ui-g-12 ui-md-12 ui-lg-12">
<div class="ui-g card overview-box overview-box-1">
<div class="ui-g-3 overview-box-icon">
<p:graphicImage value="#{request.contextPath}/resources/myproject/images/icon-paper.png" library="verona-layout" />
</div>
<div class="ui-g-9" style="text-align:left">
<span class="overview-box-count"><a href="#{iterated.urlLink}" target="_blank"><u>#{iterated.title}</u></a></span>
<span class="overview-box-name"><a href="#{iterated.urlLink}" target="_blank"><font color="black">Some text</font> #{myBean.textExample} <font color="black">-</font> #{myBean.someText} <font color="black">of</font> #{iterated.fullDomainName}</a></span>
<a href="#{iterated.urlLink}" target="_blank"><span class="overview-box-rate" >Some text example: #{myBean.someText} another text: #{myBean.otherText}</span></a>
</div>
</div>
</div>
</p:dataScroller>
</div>
</ui:define>
The box around each element don't fit the full page width, and near the first element of the dataScroller there is an empty rectangle as wide as the boxes.
p:dataScroller works very well apart from the aesthetic aspect, it's frustrating not to be able to use it for a graphic imperfection