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

    Scrollable Table contains leading whitespace

    Paul Baker Apprentice

      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>