6 Replies Latest reply on Mar 22, 2008 7:34 AM by pbaker01

Scrollable Table contains leading whitespace

pbaker01 Mar 15, 2008 12:13 PM

I know that there are several posts on scrollable tables but I have not seen one describe the problem that I am having.

I have also posted in this thread:
http://jboss.com/index.html?module=bb&op=viewtopic&t=120337

My problem is that detail lines are shifted to the right. They are not aligned with the header columns.

Example:

Hdg1 Hdg2 Hdg3
 dtl1 dtl2 dtl3
 dtl1 dtl2 dtl3
 dtl1 dtl2 dtl3
 dtl1 dtl2 dtl3
 dtl1 dtl2 dtl3

Hdgn - are the heading lables
dtln - are the detail lines

unallocatedPayload2.xhtml is:

<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:rich="http://richfaces.ajax4jsf.org/rich"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:c="http://java.sun.com/jstl/core"
 xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">

 <ui:include src="flightHdr.xhtml" />

 <rich:dragIndicator id="indicator" acceptClass="accept"
 rejectClass="reject">
 <f:facet name="single">
 <f:verbatim>
 {marker} <b>{testDrag}</b> {label}
 </f:verbatim>
 </f:facet>
 <rich:dndParam name="accept" value="Ok" />
 <rich:dndParam name="reject" value="Invalid Position" />
 </rich:dragIndicator>

 <center>
 <h:form>
 <rich:dropSupport acceptedTypes="#{dragNdrop.flight.validPosTypes}"
 dropValue="table" dropListener="#{dragNdrop.processDrop}"
 reRender="deadload, positions">
 <rich:dndParam type="drop" name="accept">
 <h:outputText value="Move back to table"></h:outputText>
 </rich:dndParam>
 <a4j:actionparam value="table" name="DropValue" />
 <a4j:actionparam value="table" name="DropType" />
 </rich:dropSupport>
 <a4j:outputPanel>
 <rich:scrollableDataTable rowKeyVar="rkv" height="230px" id="deadload" rows="5"
 value="#{dragNdrop.flight.unallocatedDeadload}" var="next"
 sortMode="single" >

 <rich:column id="id">
 <f:facet name="header">
 <h:outputText value="Id" />
 </f:facet>

 <a4j:outputPanel>
 <rich:dragSupport dragIndicator=":indicator"
 dragType="#{next.uldType}">
 <a4j:actionparam value="#{next.id}" name="DragValue" />
 <a4j:actionparam value="deadload" name="DragType" />
 <rich:dndParam name="accept" type="drag">
 <h:outputText value="#{next.uldType}"></h:outputText>
 </rich:dndParam>

 <rich:dndParam name="reject" type="drag">
 <h:outputText value="#{next.uldType} not accepted"></h:outputText>
 </rich:dndParam>
 </rich:dragSupport>
 <h:outputText value="#{next.id}"></h:outputText>
 </a4j:outputPanel>
 </rich:column>

 <rich:column id="type">
 <f:facet name="header">
 <h:outputText value="Type" />
 </f:facet>
 <a4j:outputPanel>
 <rich:dragSupport dragIndicator=":indicator"
 dragType="#{next.uldType}">
 <a4j:actionparam value="#{next.id}" name="DragValue" />
 <a4j:actionparam value="deadload" name="DragType" />
 <rich:dndParam name="accept" type="drag">
 <h:outputText value="#{next.uldType}"></h:outputText>
 </rich:dndParam>

 <rich:dndParam name="reject" type="drag">
 <h:outputText value="#{next.uldType} not accepted"></h:outputText>
 </rich:dndParam>
 </rich:dragSupport>
 <h:outputText value="#{next.type}"></h:outputText>
 </a4j:outputPanel>
 </rich:column>

 <rich:column id="dest">
 <f:facet name="header">
 <h:outputText value="Dest" />
 </f:facet>
 <a4j:outputPanel>
 <rich:dragSupport dragIndicator=":indicator"
 dragType="#{next.uldType}">
 <a4j:actionparam value="#{next.id}" name="DragValue" />
 <a4j:actionparam value="deadload" name="DragType" />
 <rich:dndParam name="accept" type="drag">
 <h:outputText value="#{next.uldType}"></h:outputText>
 </rich:dndParam>

 <rich:dndParam name="reject" type="drag">
 <h:outputText value="#{next.uldType} not accepted"></h:outputText>
 </rich:dndParam>
 </rich:dragSupport>
 <h:outputText value="#{next.dest}"></h:outputText>
 </a4j:outputPanel>
 </rich:column>

 <rich:column id="weight">
 <f:facet name="header">
 <h:outputText value="Weight" />
 </f:facet>
 <a4j:outputPanel>
 <rich:dragSupport dragIndicator=":indicator"
 dragType="#{next.uldType}">
 <a4j:actionparam value="#{next.id}" name="DragValue" />
 <a4j:actionparam value="deadload" name="DragType" />
 <rich:dndParam name="accept" type="drag">
 <h:outputText value="#{next.uldType}"></h:outputText>
 </rich:dndParam>

 <rich:dndParam name="reject" type="drag">
 <h:outputText value="#{next.uldType} not accepted"></h:outputText>
 </rich:dndParam>
 </rich:dragSupport>
 <h:outputText value="#{next.weight}"></h:outputText>
 </a4j:outputPanel>
 </rich:column>

 <rich:column id="uldType">
 <f:facet name="header">
 <h:outputText value="ULD" />
 </f:facet>
 <a4j:outputPanel>
 <rich:dragSupport dragIndicator=":indicator"
 dragType="#{next.uldType}">
 <a4j:actionparam value="#{next.id}" name="DragValue" />
 <a4j:actionparam value="deadload" name="DragType" />
 <rich:dndParam name="accept" type="drag">
 <h:outputText value="#{next.uldType}"></h:outputText>
 </rich:dndParam>

 <rich:dndParam name="reject" type="drag">
 <h:outputText value="#{next.uldType} not accepted"></h:outputText>
 </rich:dndParam>
 </rich:dragSupport>
 <h:outputText value="#{next.uldType}"></h:outputText>
 </a4j:outputPanel>
 </rich:column>

 <rich:column id="remarks">
 <f:facet name="header">
 <h:outputText value="Remarks" />
 </f:facet>
 <a4j:outputPanel>
 <rich:dragSupport dragIndicator=":indicator"
 dragType="#{next.uldType}">
 <a4j:actionparam value="#{next.id}" name="DragValue" />
 <a4j:actionparam value="deadload" name="DragType" />
 <rich:dndParam name="accept" type="drag">
 <h:outputText value="#{next.uldType}"></h:outputText>
 </rich:dndParam>

 <rich:dndParam name="reject" type="drag">
 <h:outputText value="#{next.uldType} not accepted"></h:outputText>
 </rich:dndParam>
 </rich:dragSupport>
 <h:outputText value="#{next.remarks}"></h:outputText>
 </a4j:outputPanel>
 </rich:column>

 </rich:scrollableDataTable>
 </a4j:outputPanel>
 </h:form>
 </center>
</html>

unallocatedPayload2.xhtml is referenced from:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:rich="http://richfaces.ajax4jsf.org/rich"
 xmlns:c="http://java.sun.com/jstl/core"
 xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">

 <ui:composition template="#{menuState.layout}">

 <ui:define name="header">
 <h:form>
 <h:panelGrid border="0" columns="1" style="width:100%">
 <rich:toolBar height="25">
 <rich:dropDownMenu value="File">

 <rich:menuItem value="New">
 </rich:menuItem>
 <rich:menuItem value="Open" />
 <rich:menuGroup value="Save As...">
 <rich:menuItem value="Text File" />
 <rich:menuItem value="PDF File" />
 </rich:menuGroup>
 <rich:menuItem value="Close" />
 <rich:menuSeparator id="menuSeparator11" />
 <rich:menuItem value="Exit" />

 </rich:dropDownMenu>

 <rich:dropDownMenu value="View">
 <rich:menuItem value="#{menuState.toggleLabel}"
 action="#{menuState.toggleMenu}" />
 <rich:menuItem value="Airlines"
 action="#{ldpFeature.viewAirlines}" />
 <rich:menuItem value="Aircraft"
 action="#{ldpFeature.viewAircraftTypes}" />
 <rich:menuItem value="Flight Schedules"
 action="#{ldpFeature.viewFlightDispatch}" />
 <rich:menuItem value="Flight Dispatch"
 action="#{ldpFeature.viewFlightDispatch}" />
 </rich:dropDownMenu>

 <rich:dropDownMenu value="Voyager">
 <ui:include src="/layout/voyagermenu.xhtml" />
 </rich:dropDownMenu>


 </rich:toolBar>
 </h:panelGrid>
 </h:form>
 </ui:define>

 <ui:define name="menu">
 <c:if test="${ldpFeature.airlineFeatureSelected}">
 <ui:include src="./airlines/airlinePanel.xhtml" />
 </c:if>

 <c:if test="${ldpFeature.aircraftTypesFeatureSelected}">
 <ui:include src="./aircraftTypes/aircraftTypePanel.xhtml" />
 </c:if>

 <c:if test="${ldpFeature.flightDispatchFeatureSelected}">
 <ui:include src="./dispatch/flightPanel.xhtml" />
 </c:if>
 </ui:define>

 <ui:define name="content">
 <c:if test="${ldpFeature.airlineFeatureSelected}">
 <ui:include src="./airlines/airline.xhtml" />
 </c:if>

 <c:if test="${ldpFeature.aircraftTypesFeatureSelected}">
 <ui:include src="./aircraftTypes/aircraftType.xhtml" />
 </c:if>

 <c:if test="${ldpFeature.flightDispatchFeatureSelected}">
 <c:if test="${ldpMenuFlightDispatch.selectedMenuItem == 'LDPDSPUC'}">
 <ui:include src="/underConstruction.xhtml" />
 </c:if>
 <c:if
 test="${ldpMenuFlightDispatch.selectedMenuItem == 'LDPDSPALP'}">
 <ui:include src="./dispatch/unallocatedPayload2.xhtml" /> </c:if>
 </c:if>
 </ui:define>

 <ui:define name="bottom">
 <c:if test="${ldpFeature.flightDispatchFeatureSelected}">
 <c:if
 test="${ldpMenuFlightDispatch.selectedMenuItem == 'LDPDSPALP'}">
 <ui:include src="./dispatch/decklayout.xhtml" />
 </c:if>
 </c:if>
 </ui:define>


 </ui:composition>
</html>

1. Re: Scrollable Table contains leading whitespace

pbaker01 Mar 16, 2008 11:21 AM (in response to pbaker01)

Is anyone experiencing the same problem as described above?

I have tried to use scrollable tables several different ways and have always been unsuccessful. I will concede my requirements may be a little more demanding than that shown in the Richfaces demo. For example, I need a scrollable table in a toggle panel (does not work), using drag and drop with a scrollable table (problem described above), etc

I am using:
jboss-4.2.1.GA
richfaces-3.1.2, 3.1.4, 3.2.0 snapshot (none work)
facelets 1.0.14
jsf 1.2

I would love to hear some success stories. Please include the version that you are using and if you are using facelets, etc.

I've been trying to resolve this issue for six months. It is very frustrating.
Actions
2. Re: Scrollable Table contains leading whitespace

pbaker01 Mar 20, 2008 7:57 PM (in response to pbaker01)

Problem still exists using: richfaces-ui-3.2.0-20080318.044912-100-bin.zip
Actions
3. Re: Scrollable Table contains leading whitespace

maksimkaszynski Mar 21, 2008 7:55 AM (in response to pbaker01)

Do you really need center tag here?
It just breaks everything :)
Actions
4. Re: Scrollable Table contains leading whitespace

maksimkaszynski Mar 21, 2008 8:03 AM (in response to pbaker01)

http://jira.jboss.com/jira/browse/RF-2678
I filed an issue but it seems to be very rare case, and low priority, because I don't see any reason why you're using
Actions
5. Re: Scrollable Table contains leading whitespace

pbaker01 Mar 21, 2008 8:16 AM (in response to pbaker01)

Ok, I was not aware that I use using a rogue center tag. I removed the center tag and it looks much better!

Thank you! I want the table centered but I can try other options for that.

Now if I could get the drag-n-drop working.... again.... :)

http://www.jboss.com/index.html?module=bb&op=viewtopic&t=130886
Actions
6. Re: Scrollable Table contains leading whitespace

pbaker01 Mar 22, 2008 7:34 AM (in response to pbaker01)

"maksimkaszynski" wrote:
http://jira.jboss.com/jira/browse/RF-2678
I filed an issue but it seems to be very rare case, and low priority, because I don't see any reason why you're using center tags.

The table is working much better now that I have removed the center tag. Again, thank you for finding the source of the problem. However, I strongly disagree with your comment:
I don't see any reason why you're using center tags

center tags are used because our requirement is to have all tables centered on the page. It is hard for me to beleive that I am the first one to find this bug. Anyway, for us, it not a low priority.

Has anyone else run in to this problem?
If so, how were you able to work around it?
Actions

Go to original post