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.
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.
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.
| 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'); |