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 · 2aa3f74 · 2aa3f74
1 parent 8bcb48d
commit 2aa3f74
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 2 deletions.
diff --git a/css/buttons.bootstrap4.css b/css/buttons.bootstrap4.css
@@ -206,6 +206,130 @@ div.dt-buttons div.dropdown-menu div.dt-button-split button:last-child:after {
   position: relative;
   left: -3px;
 }
+div.dt-buttons div.dropdown-menu.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.dropdown-menu.fixed.two-column {
+  margin-left: -200px;
+}
+div.dt-buttons div.dropdown-menu.fixed.three-column {
+  margin-left: -225px;
+}
+div.dt-buttons div.dropdown-menu.fixed.four-column {
+  margin-left: -300px;
+}
+div.dt-buttons div.dropdown-menu.fixed.columns {
+  margin-left: -409px;
+}
+@media screen and (max-width: 1024px) {
+  div.dt-buttons div.dropdown-menu.fixed.columns {
+    margin-left: -308px;
+  }
+}
+@media screen and (max-width: 640px) {
+  div.dt-buttons div.dropdown-menu.fixed.columns {
+    margin-left: -203px;
+  }
+}
+@media screen and (max-width: 460px) {
+  div.dt-buttons div.dropdown-menu.fixed.columns {
+    margin-left: -100px;
+  }
+}
+div.dt-buttons div.dropdown-menu.fixed > :last-child {
+  max-height: 100vh;
+  overflow: auto;
+}
+div.dt-buttons div.dropdown-menu.two-column > :last-child, div.dt-buttons div.dropdown-menu.three-column > :last-child, div.dt-buttons div.dropdown-menu.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.dropdown-menu.two-column > :last-child > *, div.dt-buttons div.dropdown-menu.three-column > :last-child > *, div.dt-buttons div.dropdown-menu.four-column > :last-child > * {
+  -webkit-column-break-inside: avoid;
+  break-inside: avoid;
+}
+div.dt-buttons div.dropdown-menu.two-column {
+  width: 400px;
+}
+div.dt-buttons div.dropdown-menu.two-column > :last-child {
+  padding-bottom: 1px;
+  column-count: 2;
+}
+div.dt-buttons div.dropdown-menu.three-column {
+  width: 450px;
+}
+div.dt-buttons div.dropdown-menu.three-column > :last-child {
+  padding-bottom: 1px;
+  column-count: 3;
+}
+div.dt-buttons div.dropdown-menu.four-column {
+  width: 600px;
+}
+div.dt-buttons div.dropdown-menu.four-column > :last-child {
+  padding-bottom: 1px;
+  column-count: 4;
+}
+div.dt-buttons div.dropdown-menu .dt-button {
+  border-radius: 0;
+}
+div.dt-buttons div.dropdown-menu.columns {
+  width: auto;
+}
+div.dt-buttons div.dropdown-menu.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.dropdown-menu.columns > :last-child .dt-button {
+  min-width: 200px;
+  flex: 0 1;
+  margin: 0;
+}
+div.dt-buttons div.dropdown-menu.columns.dtb-b3 > :last-child, div.dt-buttons div.dropdown-menu.columns.dtb-b2 > :last-child, div.dt-buttons div.dropdown-menu.columns.dtb-b1 > :last-child {
+  justify-content: space-between;
+}
+div.dt-buttons div.dropdown-menu.columns.dtb-b3 .dt-button {
+  flex: 1 1 32%;
+}
+div.dt-buttons div.dropdown-menu.columns.dtb-b2 .dt-button {
+  flex: 1 1 48%;
+}
+div.dt-buttons div.dropdown-menu.columns.dtb-b1 .dt-button {
+  flex: 1 1 100%;
+}
+@media screen and (max-width: 1024px) {
+  div.dt-buttons div.dropdown-menu.columns > :last-child {
+    width: 612px;
+  }
+}
+@media screen and (max-width: 640px) {
+  div.dt-buttons div.dropdown-menu.columns > :last-child {
+    width: 406px;
+  }
+  div.dt-buttons div.dropdown-menu.columns.dtb-b3 .dt-button {
+    flex: 0 1 32%;
+  }
+}
+@media screen and (max-width: 460px) {
+  div.dt-buttons div.dropdown-menu.columns > :last-child {
+    width: 200px;
+  }
+}
 div.dt-buttons span.dt-button-spacer.empty {
   margin: 1px;
 }

diff --git a/css/buttons.bootstrap4.min.css b/css/buttons.bootstrap4.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"
 }