Andrew J. Holden HoldenCreative

Material design progress bars

Determinate and indeterminate progress bars. Simplified version sourced from the materialize framework: http://materializecss.com/preloader.html

A Pen by Andrew J. Holden on CodePen.

License.

Scrollable, responsive DataTables via flexbox

DataTables includes a number of configuration options for vertical and horizontal scrolling - see - [https://datatables.net/examples/basic_init/scroll_xy.html].

Due to traditional CSS limitations, DataTables 1.10.5 vertical scroll (scroll-y) configuration requires an explicit height in pixels, which breaks a responsive layout.

This solution uses Flexbox to achieve a variable height for dataTables generated table elements and includes optional support for responsive horizontal scrolling of tabular data.

To make this pen easier to follow I have marked out some codepen-only CSS rules and used HTML5 data-variable elements to produce the dataTable configurations. I have also significantly simplified the default dataTables included CSS.

Full-width image using calc() and vw

A method for making an image within a padded container full-width. CSS3 alternative to wrapping the image within a container with negative margins, or revising the HTML/CSS rules to give other child elements margins or padding.

A Pen by Andrew J. Holden on CodePen.

License.

	document.addEventListener("DOMContentLoaded", function() {
	// Function to detect if the OS is Windows
	const isWindows = () => navigator.platform.indexOf('Win') > -1;

	// Function to detect if the browser is Edge
	const isEdge = () => navigator.userAgent.indexOf('Edg/') > -1;

	// Applying the CSS rules if the OS is Windows and browser is Edge
	if (isWindows() && isEdge()) {
	const elements = document.querySelectorAll('.userflowjs-resource-center--placement-bottom-left, .userflowjs-resource-center--placement-bottom-right');