Fixed showSearchButton and showSearchClearButton style bug (#4537)

* Fixed showSearchButton and showSearchClearButton style bug

* Improved materialize search style

src/bootstrap-table.js

@@ -634,8 +634,18 @@ class BootstrapTable {
     // Fix #4516: this.showSearchClearButton is for extensions
     if (o.search || this.showSearchClearButton) {
       html = []
-      const showSearchButton = Utils.sprintf(this.constants.html.searchButton, o.formatSearch(), o.showButtonIcons ? Utils.sprintf(this.constants.html.icon, o.iconsPrefix, o.icons.search) : '', o.showButtonText ? o.formatSearch() : '')
-      const showSearchClearButton = Utils.sprintf(this.constants.html.searchClearButton, o.formatClearSearch(), o.showButtonIcons ? Utils.sprintf(this.constants.html.icon, o.iconsPrefix, o.icons.clearSearch) : '', o.showButtonText ? o.formatClearSearch() : '')
+      const showSearchButton = Utils.sprintf(this.constants.html.searchButton,
+        this.constants.buttonsClass,
+        o.formatSearch(),
+        o.showButtonIcons ? Utils.sprintf(this.constants.html.icon, o.iconsPrefix, o.icons.search) : '',
+        o.showButtonText ? o.formatSearch() : ''
+      )
+      const showSearchClearButton = Utils.sprintf(this.constants.html.searchClearButton,
+        this.constants.buttonsClass,
+        o.formatClearSearch(),
+        o.showButtonIcons ? Utils.sprintf(this.constants.html.icon, o.iconsPrefix, o.icons.clearSearch) : '',
+        o.showButtonText ? o.formatClearSearch() : ''
+      )
       const searchInputHtml = `<input class="${this.constants.classes.input}${Utils.sprintf(' input-%s', o.iconSize)} search-input" type="text" placeholder="${o.formatSearch()}">`
       let searchInputFinalHtml = searchInputHtml
 

src/constants/index.js

@@ -55,8 +55,8 @@ const CONSTANTS = {
       icon: '<i class="%s %s"></i>',
       inputGroup: '<div class="input-group">%s<span class="input-group-btn">%s</span></div>',
       searchInput: '<input class="%s%s" type="text" placeholder="%s">',
-      searchButton: '<button class="btn btn-default" type="button" name="search" title="%s">%s %s</button>',
-      searchClearButton: '<button class="btn btn-default" type="button" name="clearSearch" title="%s">%s %s</button>'
+      searchButton: '<button class="%s" type="button" name="search" title="%s">%s %s</button>',
+      searchClearButton: '<button class="%s" type="button" name="clearSearch" title="%s">%s %s</button>'
     }
   },
   4: {
@@ -100,8 +100,8 @@ const CONSTANTS = {
       icon: '<i class="%s %s"></i>',
       inputGroup: '<div class="input-group">%s<div class="input-group-append">%s</div></div>',
       searchInput: '<input class="%s%s" type="text" placeholder="%s">',
-      searchButton: '<button class="btn btn-secondary" type="button" name="search" title="%s">%s %s</button>',
-      searchClearButton: '<button class="btn btn-secondary" type="button" name="clearSearch" title="%s">%s %s</button>'
+      searchButton: '<button class="%s" type="button" name="search" title="%s">%s %s</button>',
+      searchClearButton: '<button class="%s" type="button" name="clearSearch" title="%s">%s %s</button>'
     }
   }
 }[bootstrapVersion]

src/themes/bulma/bootstrap-table-bulma.js

@@ -35,8 +35,8 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.html.paginationItem = '<li><a class="page-item pagination-link%s" aria-label="%s" href="#">%s</a></li>'
     this.constants.html.searchInput = '<p class="control"><input class="%s input-%s" type="text" placeholder="%s"></p>'
     this.constants.html.inputGroup = '<div class="field has-addons has-addons-right">%s%s</div>'
-    this.constants.html.searchButton = '<p class="control"><button class="button" type="button" name="search" title="%s">%s %s</button></p>'
-    this.constants.html.searchClearButton = '<p class="control"><button class="button" type="button" name="clearSearch" title="%s">%s %s</button></p>'
+    this.constants.html.searchButton = '<p class="control"><button class="%s" type="button" name="search" title="%s">%s %s</button></p>'
+    this.constants.html.searchClearButton = '<p class="control"><button class="%s" type="button" name="clearSearch" title="%s">%s %s</button></p>'
   }
 
   initToolbar () {

src/themes/foundation/bootstrap-table-foundation.js

@@ -33,8 +33,6 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.html.paginationItem = '<li><a class="page-item%s" aria-label="%s" href="#">%s</a></li>'
     this.constants.html.inputGroup = '<div class="input-group">%s <div class="input-group-button">%s</div></div>'
     this.constants.html.searchInput = '<input class="%s input-%s input-group-field" type="text" placeholder="%s">'
-    this.constants.html.searchButton = '<button class="button" type="button" name="search" title="%s">%s %s</button>'
-    this.constants.html.searchClearButton = '<button class="button" type="button" name="clearSearch" title="%s">%s %s</button>'
   }
 
   initToolbar () {

src/themes/materialize/bootstrap-table-materialize.js

@@ -19,7 +19,9 @@ $.extend($.fn.bootstrapTable.defaults, {
     detailOpen: 'add',
     detailClose: 'remove',
     fullscreen: 'fullscreen',
-    sort: 'sort'
+    sort: 'sort',
+    search: 'search',
+    clearSearch: 'delete'
   }
 })
 
@@ -45,6 +47,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.html.pagination = ['<ul class="pagination%s">', '</ul>']
     this.constants.html.paginationItem = '<li class="waves-effect page-item%s" aria-label="%s"><a href="#">%s</a></li>'
     this.constants.html.icon = '<i class="%s">%s</i>'
+    this.constants.html.inputGroup = '%s%s'
   }
 
   initToolbar () {

src/themes/materialize/bootstrap-table-materialize.scss

@@ -17,6 +17,13 @@
   }
 
   .fixed-table-toolbar {
+    .search .search-input {
+      width: auto;
+      margin: 0;
+      height: 35px;
+      vertical-align: bottom;
+    }
+
     .columns > .btn {
       margin-left: 3px;
     }

src/themes/semantic/bootstrap-table-semantic.js

@@ -29,8 +29,6 @@ $.BootstrapTable = class extends $.BootstrapTable {
     this.constants.html.dropdownCaret = '<i class="dropdown icon"></i>'
     this.constants.html.pagination = ['<div class="ui pagination menu%s">', '</div>']
     this.constants.html.paginationItem = '<a class="page-item item%s" aria-label="%s" href="#">%s</a>'
-    this.constants.html.searchButton = '<button class="ui button" type="button" name="search" title="%s">%s %s</button>'
-    this.constants.html.searchClearButton = '<button class="ui button" type="button" name="clearSearch" title="%s">%s %s</button>'
     this.constants.html.inputGroup = '<div class="ui action input">%s%s</div>'
   }