UI 2023

tableList component and its formation

To calculate maximum height of the tableList

Get top edge of the table, for example 180.1875 (pixels)

var tableT = document.querySelectorAll("#tableList_user_container .jexcel_content")[0].getBoundingClientRect().top

Get height of the list controls, for example 26.640625 (pixels)

var ctrlH = document.querySelectorAll("#tableList_user_container .si-formControls")[0].getBoundingClientRect().height;

Get bottom padding and margins of the si-Card. This requires card to have an attribute identical to the list. For example <div class="si-card" si_tableList-user>

var listCard = document.querySelectorAll("div.si-card[si_tableList-user]")[0];
window.getComputedStyle(listCard).marginBottom;
window.getComputedStyle(listCard).paddingBottom;

Final code

const tableList = {};
tableList.tableTop = document.querySelectorAll("#tableList_user_container .jexcel_content")[0].getBoundingClientRect().top * 1
tableList.listControls = document.querySelectorAll("#tableList_user_container .si-formControls")[0];
tableList.listControlsHeight = tableList.listControls.getBoundingClientRect().height;
tableList.listControlsMargin = window.getComputedStyle(tableList.listControls).marginBottom.replace(/\D/g,'') * 1 + 
	window.getComputedStyle(tableList.listControls).marginTop.replace(/\D/g,'') * 1;
tableList.listCard = document.querySelectorAll("div.si-card[si_tableList-user]")[0];
tableList.listCardMargin = window.getComputedStyle(tableList.listCard).marginBottom.replace(/\D/g,'') * 1;
tableList.listCardPadding = window.getComputedStyle(tableList.listCard).paddingBottom.replace(/\D/g,'') * 1;
document.querySelectorAll("#tableList_user_container .jexcel_content")[0].style.maxHeight = 'calc(100vh - ' + 
	(
		tableList.tableTop +
		tableList.listControlsHeight +
		tableList.listControlsMargin +
		tableList.listCardMargin +
		tableList.listCardPadding
	) + 'px - 2rem)';