db6e4f2098228c67ec88c7b52306f9748cd1cecf Fix: Bootstrap 3/4 didn't pr…

…ovide multi-column layout 2a62623ad020b425cf043265fdcc053fca921e44 Buttons 2.4.2 Sync to source repo @2a62623ad020b425cf043265fdcc053fca921e44
DataTables · Aug 30, 2023 · 851d620 · 851d620
1 parent d394e87
commit 851d620
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 4 deletions.
diff --git a/css/buttons.bootstrap.css b/css/buttons.bootstrap.css
@@ -171,9 +171,9 @@ div.dt-buttons div.btn-group {
   position: initial;
 }
 div.dt-buttons div.dt-button-collection {
-  position: absolute !important;
+  position: absolute;
   min-width: 200px;
-  margin-top: 3px !important;
+  margin-top: 3px;
   z-index: 2002;
 }
 div.dt-buttons div.dt-button-collection .dropdown-menu {
@@ -217,6 +217,130 @@ div.dt-buttons div.dt-button-collection .dropdown-menu div.dt-button-split butto
   color: #16181b;
   background-color: #f8f9fa;
 }
+div.dt-buttons div.dt-button-collection.fixed {
+  position: fixed;
+  display: block;
+  top: 50%;
+  left: 50%;
+  margin-left: -75px;
+  border-radius: 5px;
+  background-color: white;
+  padding: 0.5em;
+}
+div.dt-buttons div.dt-button-collection.fixed.two-column {
+  margin-left: -200px;
+}
+div.dt-buttons div.dt-button-collection.fixed.three-column {
+  margin-left: -225px;
+}
+div.dt-buttons div.dt-button-collection.fixed.four-column {
+  margin-left: -300px;
+}
+div.dt-buttons div.dt-button-collection.fixed.columns {
+  margin-left: -409px;
+}
+@media screen and (max-width: 1024px) {
+  div.dt-buttons div.dt-button-collection.fixed.columns {
+    margin-left: -308px;
+  }
+}
+@media screen and (max-width: 640px) {
+  div.dt-buttons div.dt-button-collection.fixed.columns {
+    margin-left: -203px;
+  }
+}
+@media screen and (max-width: 460px) {
+  div.dt-buttons div.dt-button-collection.fixed.columns {
+    margin-left: -100px;
+  }
+}
+div.dt-buttons div.dt-button-collection.fixed > :last-child {
+  max-height: 100vh;
+  overflow: auto;
+}
+div.dt-buttons div.dt-button-collection.two-column > :last-child, div.dt-buttons div.dt-button-collection.three-column > :last-child, div.dt-buttons div.dt-button-collection.four-column > :last-child {
+  display: block !important;
+  -webkit-column-gap: 8px;
+  -moz-column-gap: 8px;
+  -ms-column-gap: 8px;
+  -o-column-gap: 8px;
+  column-gap: 8px;
+}
+div.dt-buttons div.dt-button-collection.two-column > :last-child > *, div.dt-buttons div.dt-button-collection.three-column > :last-child > *, div.dt-buttons div.dt-button-collection.four-column > :last-child > * {
+  -webkit-column-break-inside: avoid;
+  break-inside: avoid;
+}
+div.dt-buttons div.dt-button-collection.two-column {
+  width: 400px;
+}
+div.dt-buttons div.dt-button-collection.two-column > :last-child {
+  padding-bottom: 1px;
+  column-count: 2;
+}
+div.dt-buttons div.dt-button-collection.three-column {
+  width: 450px;
+}
+div.dt-buttons div.dt-button-collection.three-column > :last-child {
+  padding-bottom: 1px;
+  column-count: 3;
+}
+div.dt-buttons div.dt-button-collection.four-column {
+  width: 600px;
+}
+div.dt-buttons div.dt-button-collection.four-column > :last-child {
+  padding-bottom: 1px;
+  column-count: 4;
+}
+div.dt-buttons div.dt-button-collection .dt-button {
+  border-radius: 0;
+}
+div.dt-buttons div.dt-button-collection.columns {
+  width: auto;
+}
+div.dt-buttons div.dt-button-collection.columns > :last-child {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 6px;
+  width: 818px;
+  padding-bottom: 1px;
+}
+div.dt-buttons div.dt-button-collection.columns > :last-child .dt-button {
+  min-width: 200px;
+  flex: 0 1;
+  margin: 0;
+}
+div.dt-buttons div.dt-button-collection.columns.dtb-b3 > :last-child, div.dt-buttons div.dt-button-collection.columns.dtb-b2 > :last-child, div.dt-buttons div.dt-button-collection.columns.dtb-b1 > :last-child {
+  justify-content: space-between;
+}
+div.dt-buttons div.dt-button-collection.columns.dtb-b3 .dt-button {
+  flex: 1 1 32%;
+}
+div.dt-buttons div.dt-button-collection.columns.dtb-b2 .dt-button {
+  flex: 1 1 48%;
+}
+div.dt-buttons div.dt-button-collection.columns.dtb-b1 .dt-button {
+  flex: 1 1 100%;
+}
+@media screen and (max-width: 1024px) {
+  div.dt-buttons div.dt-button-collection.columns > :last-child {
+    width: 612px;
+  }
+}
+@media screen and (max-width: 640px) {
+  div.dt-buttons div.dt-button-collection.columns > :last-child {
+    width: 406px;
+  }
+  div.dt-buttons div.dt-button-collection.columns.dtb-b3 .dt-button {
+    flex: 0 1 32%;
+  }
+}
+@media screen and (max-width: 460px) {
+  div.dt-buttons div.dt-button-collection.columns > :last-child {
+    width: 200px;
+  }
+}
 div.dt-buttons span.caret {
   margin-left: 0.5em;
 }

diff --git a/css/buttons.bootstrap.min.css b/css/buttons.bootstrap.min.css
diff --git a/datatables.json b/datatables.json
@@ -14,5 +14,5 @@
     ],
     "src-repo": "http://github.com/DataTables/Buttons",
     "last-tag": "2.4.1",
-    "last-sync": "7fb312250b55153d85bc23518e261b2cd43fc65d"
+    "last-sync": "2a62623ad020b425cf043265fdcc053fca921e44"
 }