/* Running Squiz Matrix Developed by Squiz - http://www.squiz.net Squiz, Squiz Matrix, MySource, MySource Matrix and Squiz.net are registered Trademarks of Squiz Pty Ltd Page generated: 07 May 2026 04:52:32 */ /* ======================================================================================================== AITS DATATABLES UNIVERSAL FIX FILE ========================================================================================================== This file is to be added to applications that use datatables to fix common/universal issues in the default datatable styling - specifically with the appearance of sort icons and the alignment of labels/buttons in the control wrapper. Additional styling of datatable elements should not be added to this file, but be instead handled in the site-specific css. This file was created to work with Datatables version 1.12.1 /* ==================================================== CHANGE LOG ====================================================== 11/30/22 - This file was created to work with Datatables version 1.12.1 12/2/22 - Adjustment to the no-sort styling to make styling consistent across all cells in header 12/9/22 - Updated to add responsiveness fixes. There were changes made to the HTML to account for these fixes - documentation pending. 12/14/22 - Adjustments to the padding on the sort icons to make them work across different browswers 12/15/22 - Adjustments to the margin-right of the export buttons to make the spacing between them and the search work better as screen size decreases. */ /* ==================================================== TABLE OF CONTENTS ====================================================== ## TABLE HEADING - SORT ICONS ### SORT ICON BASE STYLING ### ASCENDING AND DESCENDING SORT STATES ### NO SORT ## RESPONSIVENESS ## HELPER */ /* ==================================================== ## TABLE HEADING - SORT ICONS ====================================================== */ /* The CSS here updates the base styling of the sort icons in the header to make them more accessible. By default the icons are all black. Color adjustments (either account for changes to the background color or to make it so active sort icons are differentiated from inactive icons by either color or opacity) should be handled in the site specific CSS */ /* =============== ### SORT ICON BASE STYLING =============== */ /* The sort icons that appear in the headers is made up of two triangles, created using psuedo classes on the th or td cells in the table. The upward facing triange arrow is created using ::before and the downward facing arrow is created using ::after. By default both triangles are shown, and then one triangle is hidden when the column is sorted. Color and opacity changes to match the visual design of a specific site should be handled in site-specific CSS. */ /*Sets the base size, padding, and opacity styling for the up/down arrows used in the sorting icons.*/ table.dataTable thead > tr > th.sorting::before, table.dataTable thead > tr > td.sorting::before, table.dataTable thead > tr > th.sorting::after, table.dataTable thead > tr > td.sorting::after { opacity: 1; font-size: 13px; } /*Sets the ascending/up arrow icon*/ table.dataTable thead > tr > th.sorting::before, table.dataTable thead > tr > td.sorting::before { content: "\25B2"; padding-bottom: 1px; } /*Sets the Descending/down arrow icon*/ table.dataTable thead > tr > th.sorting::after, table.dataTable thead > tr > td.sorting::after { content: "\25BC"; padding-top: 2px; } /* =============== ### ASCENDING AND DESCENDING SORT STATES =============== */ /*When column is sorted "ascending", the bottom triangle disappears*/ table.dataTable thead > tr > th.sorting_asc::after, table.dataTable thead > tr > td.sorting_asc::after { content: none; } /*When column is sorted "descending", the top triangle disappears*/ table.dataTable thead > tr > th.sorting_desc::before, table.dataTable thead > tr > td.sorting_desc::before { content: none; } /* =============== ### No Sort =============== */ /* If an individual column or columns can not be sorted on in an otherwise sortable table (for example, when a column has just checkboxes in it) then the class "no-sort should be added to the column(s) in question. This will fix the cursor behavior and hide the sort icons. */ .no-sort.sorting,.no-sort.sorting.sorting_asc, .no-sort.sorting.sorting_desc { cursor: default; } .no-sort.sorting::before, .no-sort.sorting::after, .no-sort.sorting.sorting_asc::before, .no-sort.sorting.sorting_asc::after, .no-sort.sorting.sorting_desc::before, .no-sort.sorting.sorting_desc::after { content: none; } .no-sort {position: relative;} /* ==================================================== ## WRAPPER CONTROLS & RESPONSIVENESS ====================================================== */ /* DOCUMENTATION PENDING - need information on how HTML/Datatables are configured with the wrapper classes, HTML div structure - the # of results select and label are in a "datatableContainer_pageLength" div - The filter search input and label are in a "datatableContainer_filterResults" div - The pagination is in a "datatableContainer_pagination" div - The wrapper div for the pagination at the top and bottom of the table also have the classes "datatableContainer_paginateTop" and "datatableContainer_paginateBottom" respectively - The results count text is in a "datatableContainer_resultCounts" div - Export buttons are not in an additional div container and just have the default dt-buttons container div */ /* =============== ### GENERAL LAYOUT =============== */ .dataTables_wrapper::after {width:100%} /*gets rid of weird right space after bottom pagination*/ .dataTables_wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; } /* =============== ### SPECIFIC CONTROL ELEMENTS =============== */ .dataTables_wrapper .dataTables_length, div.dt-buttons, .dt-buttons, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .datatableContainer_paginateBottom, .dataTables_wrapper .dataTables_paginate {float: none;} .datatableContainer_pageLength, .dataTables_info {padding-right: 2rem} .datatableContainer_filterResults {padding-left: 2rem} .datatableContainer_paginateTop { text-align: right; width: 100%; } /* =============== ### RESPONSIVENESS - MEDIUM SCREENS ============== */ @media (max-width: 800px) { .dataTables_wrapper .datatableContainer_filterResults, .datatableContainer_pagination { width: 100%; padding: 0; } .dataTables_wrapper .dataTables_filter {margin-top: .5rem} .dt-buttons, .dataTables_wrapper .dataTables_filter {text-align: right} .datatableContainer_pagination .dataTables_paginate, .datatableContainer_paginateTop, .datatableContainer_paginateBottom {text-align: left;} } /* =============== ### RESPONSIVENESS - SMALL SCREENS ============== */ @media (max-width: 640px) { .dataTables_wrapper .dataTables_filter, div.dt-buttons {text-align: right} .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_info, .datatableContainer_pagination .dataTables_paginate, .datatableContainer_paginateTop, .datatableContainer_paginateBottom { text-align: left; } } @media (max-width: 500px) { .dataTables_wrapper > div{display: block;} .datatableContainer_pageLength, .dt-buttons, .dataTables_wrapper .datatableContainer_filterResults {width: 100%} .datatableContainer_pageLength {margin-bottom: .5rem;} .dataTables_wrapper .dataTables_filter, div.dt-buttons {text-align: left} } /* =============== ### RESPONSIVENESS - MEDIUM SCREENS WITH EXTRA WIDE TABLES ============== */ /* This additional class can be added to a table that is very wide and where the content goes off the right side of the screen at larger sizes to make the wrapper controls (search input, butons, pagination) jump to the left side of the screen at larger screen sizes than it does by default so that it doesn't go off the edge of the screen */ .extra-wide-table { @media (max-width: 800px) { .dataTables_wrapper > div{display: block;} .datatableContainer_pageLength, .dt-buttons, .dataTables_wrapper .datatableContainer_filterResults {width: 100%} .datatableContainer_pageLength {margin-bottom: .5rem;} .dataTables_wrapper .dataTables_filter, div.dt-buttons {text-align: left} } } /* ==================================================== ## HELPER ====================================================== */ .noDisplay {display: none !important}