Unequal white space distribution with multi-column layout

[Volomeister]

I noticed that multiple sections with different number of columns per section on Details DataPages can lead to unequal white space distribution.

It happens because CSS grid-template columns are not equal:




I am sharing the following JavaScript that addresses this matter:

 

<script>
if(typeof mainDataPageReadyHandler == 'undefined') {

const GetNumberOfGridColumns = (columnTemplateString) => {
return columnTemplateString.split(' ').length
}

const getSectionWidth = (HTMLSection) => {
return parseFloat(window.getComputedStyle(HTMLSection).getPropertyValue('width').replace('px', ''))
}

const generateGridTemplateColumnsString = (totalGridColumnsWidth, numberOfGridColumns) => {
let gridTemplateColumnsString = ''
let columnWidth = totalGridColumnsWidth/numberOfGridColumns
for (let i=0; i<numberOfGridColumns; i++ ) {
gridTemplateColumnsString+= `${columnWidth}px `
}
return gridTemplateColumnsString
}

const setGridTemplateLayout = (HTMLSection, columnTemplateStr) => {
HTMLSection.style = `grid-template-columns: ${columnTemplateStr};`
}


const mainDataPageReadyHandler = () => {
let section = document.querySelector('section[id*="cbTable"]')
let gridComputedStyleArr = window.getComputedStyle(section).getPropertyValue('grid-template').split(' / ')
let columnTemplateString = gridComputedStyleArr[1]
setGridTemplateLayout(section, generateGridTemplateColumnsString(getSectionWidth(section), GetNumberOfGridColumns(columnTemplateString)))
}
window.addEventListener('resize', mainDataPageReadyHandler)
document.addEventListener('DataPageReady', mainDataPageReadyHandler)
}


</script>

Hope it helps somebody. If you notice any corner cases that were not considered, feel free to leave your suggestion