Table overlay floats at the end of multipage invoice

OL Connect Professional
1

Good Morning

I created new thread to track this inside here, maybe You will know what is wrong, because I am totally pissed off.

I have multiple detail tables created by template script:

var field, result = "";
var serviceDetail = record.tables.detailS;
var innerDetails = "";
var servicePricingDetails = "";
var serviceCustomerZO, serviceSAPO, serviceNameZO, serviceStreetZO, serviceCityZO, serviceRegionZO;

result += "<tbody>";

for (var i = 0; i < serviceDetail.length; i++) 
{
	serviceCustomerZO = serviceDetail[i].fields.Customer_ZO;
	serviceSAPO = serviceDetail[i].fields.SAPO;
	serviceNameZO = serviceDetail[i].fields.Name_ZO;
	serviceStreetZO = serviceDetail[i].fields.Street_ZO;
	serviceCityZO = serviceDetail[i].fields.City_ZO;
	serviceRegionZO = serviceDetail[i].fields.Region_ZO;
	
	result += "<tr class='serviceMainRow' data-breakable=\"\">";
		result += "<td class='serviceRow' colspan='4' style='text-align: left;'>"
			result += "<span id='servAddrTextID' class='serviceHeader'>SERVICE ADDRESS #: </span><span id='servAddrValID' class='Customer_ZO'>"+serviceCustomerZO+"</span>";
		result +=  "</td>"

        result += "<td class='serviceRow' colspan='5' style='text-align: left;'>"
        	result += "<span class='serviceHeader'>PO #: </span><span class='SAPO'>"+serviceSAPO+"</span>";
        result +=  "</td>"
	result += "</tr>";
       
   result += "<tr class='serviceMainRow' data-breakable=\"\">";
   		result += "<td class='serviceRow' colspan='9' style='text-align: left;'>"
   			result += "<span class='serviceHeader'>SERVICE ADDRESS: </span><span class='Name_ZO'>"+serviceNameZO+"</span>, <span class='Street_ZO'>"+serviceStreetZO+"</span>, <span class='City_ZO'>"+serviceCityZO+"</span>, <span class='Region_ZO'>"+serviceRegionZO+"</span><br>";
   		result +=  "</td>"
   result += "</tr>";
   
   result += "<tr class='tabServiceTableDetHeader' data-breakable=\"\">";
		result += "<td style='width: 5% !important;'>"
   			result += "<span>#</span>";
   		result +=  "</td>"
   		result += "<td style='width: 30% !important;'>"
   			result += "<span>DESCRIPTION</span>";
   		result +=  "</td>"
   		result += "<td style='width: 20% !important;'>"
   			result += "<span>SERVICE DATE/PERIOD</span>";
   		result +=  "</td>"
   		result += "<td style='width: 10% !important;'>"
   			result += "<span>WO#</span>";
   		result +=  "</td>"
   		result += "<td style='width: 5% !important;'>"
   			result += "<span>QTY</span>";
   		result +=  "</td>"
   		result += "<td style='width: 5% !important;'>"
   			result += "<span>UNIT</span>";
   		result +=  "</td>"
   		result += "<td style='width: 10% !important;'>"
   			result += "<span>RATE</span>";
   		result +=  "</td>"
   		result += "<td style='width: 10% !important;'>"
   			result += "<span>AMOUNT</span>";
   		result +=  "</td>"
   		result += "<td style='width: 5% !important;'>"
   			result += "<span>*</span>";
   		result +=  "</td>"
   result += "</tr>";
   
   innerDetails = serviceDetail[i].tables.detailDetails;
   
   for (var j = 0; j < innerDetails.length; j++) 
   {
   		var indicator = innerDetails[j].fields.Indicator;
   		var numItem = innerDetails[j].fields.LineItem;
   		var description = innerDetails[j].fields.ServiceDescription;
   		var containerLocation = innerDetails[j].fields.ContainerLocation;
   		var settDateA = innerDetails[j].fields.A_SettDate;
   		var settDateB = innerDetails[j].fields.B_SettDate;
   		var singleServiceDate = innerDetails[j].fields.SrvDr1T;
   		var woNumber = innerDetails[j].fields.WR1WorkOrderNumber;
   		var targetQTY = innerDetails[j].fields.TargetQty;
   		var targetUnit = innerDetails[j].fields.Salesunit;
   		var targetRate = innerDetails[j].fields.Rate;
   		var netAmount = innerDetails[j].fields.FinalNetAmount;
   		var dcIndicator = innerDetails[j].fields.DCIndic;
   		var noChargePerContract = innerDetails[j].fields.NoChargePerContract;
   		var tax = innerDetails[j].fields.Tax;
   		var serviceDate = innerDetails[j].fields.FinalServiceDate;
   		var asterisks = innerDetails[j].fields.AsteriskField;
   		
   		// extract additional fields for extended detail line
   		var woInteractions = innerDetails[j].fields.WorkOrderInteractions;
   		var woPoNum = innerDetails[j].fields.WOPO;
   		
   		var scTicNum = innerDetails[j].fields.ScTicNo;
   		var scaleTTime = innerDetails[j].fields.ScaleTTim;
   		var truckNum = innerDetails[j].fields.TruckNo;
   		
   		// DP fields
   		var serviceDescription = innerDetails[j].fields.ServiceDescription;
   		var slsUnDs = innerDetails[j].fields.SlsUnDs;
   		var serviceRate = innerDetails[j].fields.Rate;
   		var seriviceNet = innerDetails[j].fields.Net;
   		var seriviceDCIndicator = innerDetails[j].fields.DCIndic;
   		
   		result += "<tr class='detailRecord' data-breakable=\"\">";
   		
   			// if record indicator = "DH" then display other record mapping with continer location and other styling
   			if(indicator == "DH") 
   			{
   				//containerLocation = "TEST CONT";
   				if(containerLocation.len == 0) {
   					containerLocation = "&nbsp;";
   				}
   			
   				result += "<td class='containerRow' id='containerLocID' colspan='9' style='width:7.37in;'>"+containerLocation+"</td>"
   			}
   			
   			if(indicator == "DP")  
   			{	
   			
   				//serviceDescription = "TEST SERVICE";
   				if(serviceDescription.len == 0) {
   					serviceDescription = "&nbsp;";
   				}
   			
   				result += "<td class='detailPricingContainer' id='dp1ID'></td>";
   				result += "<td class='detailPricingContainer' id='dp2ID'>"+serviceDescription+"</td>";
   				result += "<td class='detailPricingContainer' id='dp3ID'></td>";
   				result += "<td class='detailPricingContainer' id='dp4ID'></td>";
   				result += "<td class='detailPricingContainer' id='dp5ID'></td>";
   				result += "<td class='detailPricingContainer' id='dp6ID'>"+slsUnDs+"</td>";
   				result += "<td class='detailPricingContainer' id='dp7ID'>"+serviceRate+"</td>";
   				result += "<td class='detailPricingContainer' id='dp8ID'>"+netAmount+"</td>";
   				result += "<td class='detailPricingContainer' id='dp9ID'></td>";
   			}
   			
   			if(indicator == "D")  
   			{
   				result += "<td class='detailRow' id='detNumItemID'>"+numItem+"</td>";
   				result += "<td class='detailRow' id='detDescID'>"+description+"</td>";
   				result += "<td class='detailRow' id='detServDateID'>"+serviceDate+"</td>";
   				result += "<td class='detailRow' id='detWoNumID'>"+woNumber+"</td>";
   				result += "<td class='detailRow' id='detQtyID'>"+targetQTY+"</td>";
   				result += "<td class='detailRow' id='detUnitID'>"+targetUnit+"</td>";
   				result += "<td class='detailRow' id='detRateID'>"+targetRate+"</td>";
   				result += "<td class='detailRow' id='detNetAmountID'>"+netAmount+"</td>";
   				result += "<td class='detailRow' id='detAsteriskID'>"+asterisks+"</td>";
   				
   				// this will be displayed if extended fields for D record will be present
   				if(woInteractions.length > 0) 
   				{
   					var woPoNum = innerDetails[j].fields.WOPO;
   					var scaleTicketNum = innerDetails[j].fields.ScTicNo;
   					var scaleTicketTime = innerDetails[j].fields.ScaleTTim;
   					var truckNumber = innerDetails[j].fields.TruckNo;
							
   					    result += "<tr class='separatorRow' data-breakable=\"\">";
   							result += "<td class='detailRow' style='padding-left: 44px;' colspan='9'>";
   							result += "</br>"+woInteractions+"</br></br>";
   							result += "<strong>WO PO#: </strong>"+woPoNum+".</br>";
   							result += "<strong>SCALE TICKET #: </strong>"+scaleTicketNum+".</br>";
   							result += "<strong>SCALE TICKET TIME: </strong>"+scaleTicketTime+".</br>";
   							result += "<strong>TRUCK #: </strong>"+truckNumber+".</br></br>";
   							result += "</td>";
   						result += "</tr>";
   				}
   			}

   		result += "</tr>";   		
   }
   innerDetails = "";
   
  var orderType = serviceDetail[i].fields.OrderType;
   			
  if(orderType.length > 0) 
  {
   	// order service row displayed if field OrderType not empty for each service
   	// at the end of the box
   	result += "<tr class='serviceOrderRow' data-breakable=\"\">";
   			result += "<td class='serviceOrderCell' style='padding-left: 12px;' colspan='9'>"+orderType+"</td>";
   	result += "</tr>";
  } 
  orderType = "";
   
  // Service pricing surcharges lines for each service from SP details lines
  servicePricingDetails = serviceDetail[i].tables.detailSP;
   
  if(servicePricingDetails != null) 
  {
  	  for (var k = 0; k < servicePricingDetails.length; k++) 
  	  {
  	  		var serviceDescription = servicePricingDetails[k].fields.ServiceDescription;

  	  		var serviceNET = servicePricingDetails[k].fields.ServiceNET;
  	  		
			result += '<tr class="serviceSurcharges" data-breakable=\"\">';
				result += '<td style="padding-right: 10px;" id="surchargeDesc" class="serviceSurchargesRecord" colspan="6">';
					result += serviceDescription;
				result += '</td>';
				
				result += '<td style="padding-right: 10px;" id="surchargeNet" class="serviceSurchargesRecord" colspan="3">';
					result += serviceNET;
				result += '</td>';
			result += '</tr>';
  	  }
  }
  servicePricingDetails = "";

   // do not remove this record, this is separator empty row between service tables
   result += "<tr class='separatorRow' data-breakable=\"\">";
   		result += "<td class='separatorCell' colspan='9'>&nbsp;</td>"
   result += "</tr>";
}
serviceDetail = "";

result += "</tbody>";

results.html(result);

Also have one Invoice section which contains following html code inside source:

<!-- All details lines of main table -->
<table id="dynamicTableServiceID" class="table--sliced" data-column-resize="" data-detail="" cellpadding="0" cellspacing="0" style="width:7.37in; margin-left: 0.18in !important; overflow: hidden;">
    <tbody>
        <tr>
            <td style="width: 100%;"></td>
        </tr>
    </tbody>
</table>
<!-- No charge per contract message -->
<table id="bottomNoChargeID" style="width:7.37in; margin-left: 0.18in !important;">
    <tbody>
        <tr>
            <td><span id="nochargeID" class="footerMessage">** No Charge per contract placeholder</span></td>
        </tr>
    </tbody>
</table>
<!-- Bottom HP discounts lines -->
<table id="finalTableFooterID" class="bottomFooterTable" data-column-resize="" data-detail="" cellpadding="0" cellspacing="0" style="width:7.37in; margin-left: 0.18in !important; overflow: hidden;">
    <tbody>
    </tbody>
</table>
<!-- Final summary inside invoice footer -->
<table id="finalTableFooterSummaryID" class="bottomFooterTable" data-column-resize="" data-detail="" cellpadding="0" cellspacing="0" style="width:7.37in; margin-left: 0.18in !important; overflow: hidden;">
    <tbody>
    </tbody>
</table>

It containes other simpler tables.

My problem is that when I produce invoice which contains a lot of details, like more then 2000. The first 51 pages looks right, but then ending 5 pages contains details moved up. (Details goes up, not standing in same place)

I created OL support ticket but maybe You are able to help me please.
Adam

2

Hi @Odyn,

Can you please let us know what the Selector is of your Standard Script? I suppose that it’s table#finalTableFooterID or table#finalTableFooterSummaryID, is that correct?

3

Hey Marten

I have 3 scripts for table generations, this down below is for small tables (final tables)

image

My selector to the table with big amount of details which is huge is ID# #dynamicTableServiceID

4

Based on the shared scripts I suppose that it will be the best to open a technical support ticket on our ‘website’, which you’ve already done, isn’t it? I suppose that you will have to focus on that specific ticket because I’m not able to reproduce the reported incident by when I use some default values as the data for the detail table and use the shared script.

I’m not sure which version you’re using but for myself: I wasn’t able to reproduce it in version 2021.1.1 of the Connect Designer.

Edit: The issue does also occur when you apply both the attribute data-repeat="" and data-breakable="" to each TR-element?

5

I already had technical cal with OL specialist ROBERTO

I am waiting for some resolution.

Meanwhile I detected that this can be stylling issues because when I remove table class then everything seems to be fine.

6

By “table class” you mean the attribute class="table--sliced" or one of your own classes by which you’re styling the table element and its content?

7

Exactly, this is OL default.css class but it was .table–striped, i just rename it to .table–sliced and applied some modifications

8

Problem workaround provided from OL - ROBERTO:

Instead of using border:collapse, we have to use border:separate;

Then table not floating