fix: styles and formats for datatables2

UMN-LATIS · Dec 20, 2024 · 5ba162f · 5ba162f
1 parent 5452a40
commit 5ba162f
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 5 deletions.
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
@@ -375,7 +375,7 @@ though the color below doesn't improve much.
       right: 27px;
     }
   }
-  div.dataTables_wrapper {
+  .dataTables_wrapper {
     table {
       tbody {
         a {
@@ -395,6 +395,7 @@ though the color below doesn't improve much.
       }
     }
   }
+  .dt-length,
   .dataTables_length {
     display: none;
   }

diff --git a/app/javascript/application.css b/app/javascript/application.css
@@ -37,6 +37,7 @@
 /* Data Tables */
 .datatable input[type="search"],
 .dataTables_wrapper input[type="search"],
+.dt-container input[type="search"],
 .data-table tfoot input {
   font-size: 16px;
   border: 0;
@@ -49,13 +50,14 @@
 
 .datatable,
 .dataTables_wrapper,
+.dt-container,
 .data-table.table-bordered th {
   border-left: 0;
   border-right: 0;
 }
 
 /* right align search on vue pages */
-[data-behavior="vue"] div.dataTables_wrapper div.dataTables_filter {
+[data-behavior="vue"] .dt-container .dt-search {
   text-align: right;
 }
 
@@ -66,12 +68,12 @@
 
 /* center datatable search on mobile */
 @media (max-width: 640px) {
-  [data-behavior="vue"] div.dataTables_wrapper div.dataTables_filter label {
+  [data-behavior="vue"] .dt-container .dt-search label {
     display: block;
     width: 100%;
   }
 
-  [data-behavior="vue"] div.dataTables_wrapper div.dataTables_filter input {
+  [data-behavior="vue"] .dt-container .dt-search input {
     margin: 0;
     width: 100%;
   }

diff --git a/app/javascript/components/DataTables/DataTable.vue b/app/javascript/components/DataTables/DataTable.vue
@@ -64,6 +64,7 @@ import "datatables.net-select";
 import "datatables.net-buttons";
 import "datatables.net-bs4";
 import debounce from "lodash/debounce";
+import "datatables.net-bs4/css/dataTables.bootstrap4.min.css";
 
 DataTable.use(DataTablesLib);
 
@@ -199,7 +200,7 @@ const mergedCols = props.selectable
   : props.columns;
 </script>
 <style>
-div.dataTables_wrapper div.dataTables_processing {
+.dt-container .dt-processing {
   position: absolute;
   margin: 0;
   width: 100%;