Joomla! Documentation™

Introduction

Many of the tables in the Joomla 4 CMS are wider than average display screens. That results in two problems:

1. To see the right hand end of the table you need to scroll right resulting in the left menu and some toolbar buttons disappearing out of sight to the left.
2. Columns containing long text may become excessively tall and narrow.

This Tip addresses the first of these issues only and is aimed at custom components.

The HTML

It is easy enough to put the data table into a div with left-right scroll. However, the width has to be fixed with CSS and it is not immediately obvious that the table scrolls separately from the page. For that reason some arrows have been added here to help new users get started.

<div class="arrows">
<input type="button" value="&#8593;" data-direction="up" class="arrow" />
<input type="button" value="&#8594;" data-direction="right" class="arrow" />
<input type="button" value="&#8592;" data-direction="left" class="arrow" />
<input type="button" value="&#8595;" data-direction="down" class="arrow" />
</div>

	<div class="myscroller">
		<table id="dataTable" class="display table table-striped">
	...
		</table>
	</div>

The CSS

The first job is to set the class width for normal and collapsed left menu situations. This is hard-coded here; there is probably a better way to do it. The table border is set because either left or right borders are seen when the table is scrolled to the end of its range. This adds just a little hint of scroll behaviour. The arrows are placed at the right of the screen with room for the page scroll bar to the right.

.myscroller {
	max-width: calc(100vw - 24rem);
	overflow-y: scroll;
}
.myscroller.wider {
	max-width: calc(100vw - 9rem);
}
table {
	border: 1px solid var(--atum-link-color) ! important;
}
.arrows {
	position:fixed;
	top: calc(50% - 3rem);
	right: 10px;
	z-index: 1200;
}
.arrows .arrow {
	display: block;
	margin-bottom: 1rem;
	padding: 0 4px 0 4px;
}

The JavaScript

This script responds to the change of width of the main left menu and adds or removes a class to make the scroll table wider or not. The arrow buttons scroll the table left or right or the page up or down.

// ===== wide table support - on toggle sidebar menu =====

let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
let myscroller = document.getElementsByClassName('myscroller');

if (myscroller.length > 0) {
	var ro = new ResizeObserver(entries => {
		for (let entry of entries) {
			const cr = entry.contentRect;
			if (cr.width < 100) {
				myscroller[0].classList.add('wider'); // = vw - cr.width + \"px\";
			} else {
				myscroller[0].classList.remove('wider'); // = vw - cr.width + \"px\";
			}
		}
	});

	ro.observe(document.getElementById('sidebar-wrapper'));
}
// ===== scroll table arrows =====

var arrows = document.getElementsByClassName("arrow");
if (arrows) {
	for (var i = 0; i < arrows.length; i++) {
		arrows[i].addEventListener('click', clickarrow, false);
	}
}
function clickarrow() {
	let scroller = document.getElementsByClassName("myscroller")[0];
	let content = document.getElementById("content");
	let posx = scroller.scrollLeft;
	let posy = scrollTop = window.pageYOffset || document.documentElement.scrollTop;
	let arrow = this.getAttribute("data-direction");
	switch (arrow) {
	case "left":
		scroller.scrollLeft = posx - 100;
		break;
	case "right":
		scroller.scrollLeft = posx + 100;
		break;
	case "up":
		document.documentElement.scrollTop = document.body.scrollTop = posy - 100;
		break;
	case "down":
		document.documentElement.scrollTop = document.body.scrollTop = posy + 100;
		break;
	}
}

Result

Parent Links

Back to J4.x:Tips and Tricks for Joomla 4 Developers