Fix mobile toolbar

CHANGELOG.md

@@ -1,6 +1,18 @@
 ChangeLog
 ---------
 
+### Next
+
+#### Breaking changes in 1.25.x
+
+- Remove `toolbarAlign` in favour of flexbox. To migrate, simply override CSS. IE if you previously specified right alignment, using Bootstrap:
+```
+@media(min-width: "992px") {
+  .bs-bars {
+    margin-right: none; /** Instead of margin-right: auto */
+  }
+}
+```
 ### 1.24.1
 
 #### Core

dist/bootstrap-table.js

@@ -8558,7 +8558,7 @@
         }
         this.$toolbar.html('');
         if (typeof opts.toolbar === 'string' || _typeof(opts.toolbar) === 'object') {
-          $(Utils.sprintf('<div class="bs-bars %s-%s"></div>', this.constants.classes.pull, opts.toolbarAlign)).appendTo(this.$toolbar).append($(opts.toolbar));
+          $('<div class="bs-bars"></div>').appendTo(this.$toolbar).append($(opts.toolbar));
         }
 
         // showColumns, showToggle, showRefresh

index.d.ts

@@ -213,7 +213,6 @@ export interface BootstrapTableOptions {
   searchOnEnterKey?: boolean;
   searchText?: string;
   responseHandler?: (res: any) => any;
-  toolbarAlign?: string;
   paginationParts?: string[];
   cardView?: boolean;
   showSearchButton?: boolean;

site/docs/api/table-options.md

@@ -1825,20 +1825,6 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Custom Toolbar](https://examples.bootstrap-table.com/#options/custom-toolbar.html)
 
-## toolbarAlign
-
-- **Attribute:** `data-toolbar-align`
-
-- **Type:** `String`
-
-- **Detail:**
-
-  Indicate how to align the custom toolbar. `'left'`, `'right'` can be used.
-
-- **Default:** `'left'`
-
-- **Example:** [Toolbar Align](https://examples.bootstrap-table.com/#options/toolbar-align.html)
-
 ## totalField
 
 - **Attribute:** `data-total-field`

src/bootstrap-table.js

@@ -608,6 +608,51 @@ class BootstrapTable {
     this.initBody()
   }
 
+  renderButton (buttonName, buttonConfig) {
+    let buttonHtml
+
+    if (buttonConfig.hasOwnProperty('html')) {
+      if (typeof buttonConfig.html === 'function') {
+        buttonHtml = buttonConfig.html()
+      } else if (typeof buttonConfig.html === 'string') {
+        buttonHtml = buttonConfig.html
+      }
+    } else {
+      let buttonClass = this.constants.buttonsClass
+
+      if (buttonConfig.hasOwnProperty('attributes') && buttonConfig.attributes.class) {
+        buttonClass += ` ${buttonConfig.attributes.class}`
+      }
+      buttonHtml = `<button class="${buttonClass}" type="button" name="${buttonName}"`
+
+      if (buttonConfig.hasOwnProperty('attributes')) {
+        for (const [attributeName, value] of Object.entries(buttonConfig.attributes)) {
+          if (attributeName === 'class') {
+            continue
+          }
+
+          const attribute = attributeName === 'title' ?
+            this.options.buttonsAttributeTitle : attributeName
+
+          buttonHtml += ` ${attribute}="${value}"`
+        }
+      }
+
+      buttonHtml += '>'
+
+      if (opts.showButtonIcons && buttonConfig.hasOwnProperty('icon')) {
+        buttonHtml += `${Utils.sprintf(this.constants.html.icon, opts.iconsPrefix, buttonConfig.icon)} `
+      }
+
+      if (opts.showButtonText && buttonConfig.hasOwnProperty('text')) {
+        buttonHtml += buttonConfig.text
+      }
+
+      buttonHtml += '</button>'
+    }
+    return buttonHtml
+  }
+
   initToolbar () {
     const opts = this.options
     let html = []
@@ -621,7 +666,7 @@ class BootstrapTable {
     this.$toolbar.html('')
 
     if (typeof opts.toolbar === 'string' || typeof opts.toolbar === 'object') {
-      $(Utils.sprintf('<div class="bs-bars %s-%s"></div>', this.constants.classes.pull, opts.toolbarAlign))
+      $('<div class="bs-bars"></div>')
         .appendTo(this.$toolbar)
         .append($(opts.toolbar))
     }
@@ -751,49 +796,7 @@ class BootstrapTable {
     const buttonsHtml = {}
 
     for (const [buttonName, buttonConfig] of Object.entries(this.buttons)) {
-      let buttonHtml
-
-      if (buttonConfig.hasOwnProperty('html')) {
-        if (typeof buttonConfig.html === 'function') {
-          buttonHtml = buttonConfig.html()
-        } else if (typeof buttonConfig.html === 'string') {
-          buttonHtml = buttonConfig.html
-        }
-      } else {
-        let buttonClass = this.constants.buttonsClass
-
-        if (buttonConfig.hasOwnProperty('attributes') && buttonConfig.attributes.class) {
-          buttonClass += ` ${buttonConfig.attributes.class}`
-        }
-        buttonHtml = `<button class="${buttonClass}" type="button" name="${buttonName}"`
-
-        if (buttonConfig.hasOwnProperty('attributes')) {
-          for (const [attributeName, value] of Object.entries(buttonConfig.attributes)) {
-            if (attributeName === 'class') {
-              continue
-            }
-
-            const attribute = attributeName === 'title' ?
-              this.options.buttonsAttributeTitle : attributeName
-
-            buttonHtml += ` ${attribute}="${value}"`
-          }
-        }
-
-        buttonHtml += '>'
-
-        if (opts.showButtonIcons && buttonConfig.hasOwnProperty('icon')) {
-          buttonHtml += `${Utils.sprintf(this.constants.html.icon, opts.iconsPrefix, buttonConfig.icon)} `
-        }
-
-        if (opts.showButtonText && buttonConfig.hasOwnProperty('text')) {
-          buttonHtml += buttonConfig.text
-        }
-
-        buttonHtml += '</button>'
-      }
-
-      buttonsHtml[buttonName] = buttonHtml
+      buttonsHtml[buttonName] = renderButton(buttonName, buttonConfig)
       const optionName = `show${buttonName.charAt(0).toUpperCase()}${buttonName.substring(1)}`
       const showOption = opts[optionName]
 

src/constants/index.js

@@ -291,7 +291,6 @@ const DEFAULTS = {
   strictSearch: false,
   theadClasses: '',
   toolbar: undefined,
-  toolbarAlign: 'left',
   totalField: 'total',
   totalNotFiltered: 0,
   totalNotFilteredField: 'totalNotFiltered',

src/themes/_theme.scss

@@ -1,7 +1,29 @@
 @use "variables";
 
+/**
+ * Same as Bootstrap 5's "Large" breakpoint.
+ * @todo Refactor if other frameworks have different breakpoints
+ * @todo Is it safe to use bootstrap 5 equivalents?
+ */
+@media(min-width: "992px") {
+  .fixed-table-toolbar {
+    align-items: flex-end;
+  }
+  .bs-bars {
+    margin-right: auto;
+  }
+}
+
+@media(max-width: "991px") {
+  .fixed-table-toolbar {
+    flex-direction: column;
+  }
+}
+
 .bootstrap-table {
   .fixed-table-toolbar {
+    display: flex;
+
     &::after {
       content: "";
       display: block;