OL Learn

Dynamically changing height of cells in table


I have a document with a dynamic block of text that consists of 1 master table and within that 2 other tables (left and right side). I want to keep the height of the left side the same as the height on the right side.
So I calculated the height of each line on the left side (6 lines) and each line on the right side (6 lines) and when there is a difference on one side I add the difference divided by 6 to each line on the other side to spread the difference evenly across all lines.
For some reason the difference is never correct even though I can see that my post pagination script successfully calculated the difference and added that evenly over all the lines.

Note: In my example the left block height is bigger than the right block height.

Sample screenshot of document:

Snippet of code:

First I calculate the height of each element:

shipper_height = query('#tbl_shipper').height(true);
if (shipper_height == null) shipper_height = 0;
consignee_height = query('#tbl_consignee').height(true);
if (consignee_height == null) consignee_height = 0;
notify_height = query('#tbl_notify').height(true);
if (notify_height == null) notify_height = 0;

Then I calculate the size of each block (left and right):

// See if the left side is larger than the right side. If so then divide the difference over the rest of the blocks
block1size = shipper_height + consignee_height + notify_height + placereceipt_height + vessel_height + portdischarge_height;
block2size = bookingno_height + masterblno_height + deliverygoods_height + exportagent_height + secondnotify_height + pointorigin_height;

Then based on the difference I add the proper height to the proper elements:

// Calculate differences and divide remainder over the rest
if (block1size > block2size) {
	// The right side has 6 rows
	tmpheight = ((block1size - block2size) / 6);
	bookingno_height += tmpheight;
	blno_height += tmpheight;
	terms_height += tmpheight;
	masterblno_height += tmpheight;
	aexitno_height += tmpheight;
	fmcno_height += tmpheight;
	deliverygoods_height += tmpheight;
	exportagent_height += tmpheight;
	secondnotify_height += tmpheight;
	pointorigin_height += tmpheight;
	numbls_height += tmpheight;
} else {
	// The left side also has 6 rows
	tmpheight = ((block2size - block1size) / 6);
	shipper_height += tmpheight;
	consignee_height += tmpheight;
	notify_height += tmpheight;
	placereceipt_height += tmpheight;
	vessel_height += tmpheight;
	portloading_height += tmpheight;
	portdischarge_height += tmpheight;
	finaldest_height += tmpheight;

And finally I set the new heights for each element and repaginate:


Am I forgetting something because it does resize, just not with the amount that it should?
I can add more for each line manually to make it fit but if I then change the amount of text in each field the calculations are once again off.

Instead of changing the height of the object, have you tried increasing its padding-bottom?
I find it tricky to play with height attribute of object.

Unfortunately the same result. In my example the left side is bigger than the right side so I only set the values on the right side for now.
In my CSS I make sure the reset the current padding-bottom (or set it to at least a default):

#tbl_bookingno { padding-bottom: 0; }
#tbl_blno { padding-bottom: 0; }
#tbl_terms { padding-bottom: 0; }
#tbl_masterblno { padding-bottom: 0; }
#tbl_aexitno { padding-bottom: 0; }
#tbl_fmcno { padding-bottom: 0; }
#tbl_deliverygoods { padding-bottom: 0; }
#tbl_exportagent { padding-bottom: 0; }
#tbl_secondnotify { padding-bottom: 0; }
#tbl_pointorigin { padding-bottom: 0; }
#tbl_numbls { padding-bottom: 0; }

Then in my code I change the following:

query('#tbl_bookingno').css("padding-bottom", tmpheight.toString() + "px");
query('#tbl_blno').css("padding-bottom", tmpheight.toString() + "px");
query('#tbl_terms').css("padding-bottom", tmpheight.toString() + "px");
query('#tbl_masterblno').css("padding-bottom", tmpheight.toString() + "px");
query('#tbl_aexitno').css("padding-bottom", tmpheight.toString() + "px");
query('#tbl_fmcno').css("padding-bottom", tmpheight.toString() + "px");
query('#tbl_deliverygoods').css("padding-bottom", tmpheight.toString() + "px");
query('#tbl_exportagent').css("padding-bottom", tmpheight.toString() + "px");
query('#tbl_secondnotify').css("padding-bottom", tmpheight.toString() + "px");
query('#tbl_pointorigin').css("padding-bottom", tmpheight.toString() + "px");
query('#tbl_numbls').css("padding-bottom", tmpheight.toString() + "px");

And then I do my paginate:


The result is still the same:

At this point I would suggest you open a support ticket on our website. A technician will be able to try and reproduce the issue and if needed, escalate this to our R&D department.

Thank you for your help. I have sent a email to support regarding this issue.