no inline-block on label element

packages/react-bootstrap-table2-example/.storybook/webpack.config.js

@@ -9,6 +9,7 @@ const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style
 const paginationStylePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/style');
 const filterStylePath = path.join(__dirname, '../../react-bootstrap-table2-filter/style');
 const toolkitSourcePath = path.join(__dirname, '../../react-bootstrap-table2-toolkit/index.js');
+const toolkitStylePath = path.join(__dirname, '../../react-bootstrap-table2-toolkit/style');
 const storyPath = path.join(__dirname, '../stories');
 const examplesPath = path.join(__dirname, '../examples');
 const srcPath = path.join(__dirname, '../src');
@@ -43,7 +44,13 @@ const loaders = [{
 }, {
   test: /\.scss$/,
   use: ['style-loader', 'css-loader', 'sass-loader'],
-  include: [storyPath, sourceStylePath, paginationStylePath, filterStylePath],
+  include: [
+    storyPath,
+    sourceStylePath,
+    paginationStylePath,
+    filterStylePath,
+    toolkitStylePath
+  ],
 }, {
   test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
   loader: 'url-loader?limit=100000',

packages/react-bootstrap-table2-example/stories/index.js

@@ -229,6 +229,7 @@ import 'stories/stylesheet/storybook.scss';
 import '../../react-bootstrap-table2/style/react-bootstrap-table2.scss';
 import '../../react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss';
 import '../../react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss';
+import '../../react-bootstrap-table2-toolkit/style/react-bootstrap-table2-toolkit.scss';
 
 // import bootstrap style by given version
 import bootstrapStyle, { BOOTSTRAP_VERSION } from './bootstrap-style';

packages/react-bootstrap-table2-filter/src/components/date.js

@@ -132,7 +132,10 @@ class DateFilter extends Component {
         className={ `filter date-filter ${className}` }
         style={ style }
       >
-        <label htmlFor={ `date-filter-comparator-${text}` }>
+        <label
+          className="filter-label"
+          htmlFor={ `date-filter-comparator-${text}` }
+        >
           <span className="sr-only">Filter comparator</span>
           <select
             ref={ n => this.dateFilterComparator = n }

packages/react-bootstrap-table2-filter/src/components/multiselect.js

@@ -111,7 +111,10 @@ class MultiSelectFilter extends Component {
       `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
 
     return (
-      <label htmlFor={ `multiselect-filter-column-${column.text}` }>
+      <label
+        className="filter-label"
+        htmlFor={ `multiselect-filter-column-${column.text}` }
+      >
         <span className="sr-only">Filter by {column.text}</span>
         <select
           { ...rest }

packages/react-bootstrap-table2-filter/src/components/number.js

@@ -173,7 +173,10 @@ class NumberFilter extends Component {
         className={ `filter number-filter ${className}` }
         style={ style }
       >
-        <label htmlFor={ `number-filter-comparator-${column.text}` }>
+        <label
+          className="filter-label"
+          htmlFor={ `number-filter-comparator-${column.text}` }
+        >
           <span className="sr-only">Filter comparator</span>
           <select
             ref={ n => this.numberFilterComparator = n }
@@ -188,7 +191,10 @@ class NumberFilter extends Component {
         </label>
         {
           options ?
-            <label htmlFor={ `number-filter-column-${column.text}` }>
+            <label
+              className="filter-label"
+              htmlFor={ `number-filter-column-${column.text}` }
+            >
               <span className="sr-only">{`Select ${column.text}`}</span>
               <select
                 ref={ n => this.numberFilter = n }

packages/react-bootstrap-table2-filter/src/components/select.js

@@ -136,7 +136,10 @@ class SelectFilter extends Component {
       `filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
 
     return (
-      <label htmlFor={ `select-filter-column-${column.text}` }>
+      <label
+        className="filter-label"
+        htmlFor={ `select-filter-column-${column.text}` }
+      >
         <span className="sr-only">Filter by { column.text }</span>
         <select
           { ...rest }

packages/react-bootstrap-table2-filter/src/components/text.js

@@ -94,7 +94,10 @@ class TextFilter extends Component {
 
     // stopPropagation for onClick event is try to prevent sort was triggered.
     return (
-      <label htmlFor={ `text-filter-column-${text}` }>
+      <label
+        className="filter-label"
+        htmlFor={ `text-filter-column-${text}` }
+      >
         <span className="sr-only">Filter by {text}</span>
         <input
           { ...rest }

packages/react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss

@@ -1,3 +1,7 @@
+.react-bootstrap-table > table > thead > tr > th .filter-label {
+  display: block !important;
+}
+
 .react-bootstrap-table > table > thead > tr > th .filter {
   font-weight: normal;
 }

packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js

@@ -59,7 +59,10 @@ class SearchBar extends React.Component {
     } = this.props;
 
     return (
-      <label htmlFor={ `search-bar-${tableId}` } className="w-100">
+      <label
+        htmlFor={ `search-bar-${tableId}` }
+        className="search-label"
+      >
         <span className="sr-only">Search this table</span>
         <input
           ref={ n => this.input = n }

packages/react-bootstrap-table2-toolkit/style/react-bootstrap-table2-toolkit.scss

@@ -0,0 +1,3 @@
+.search-label {
+  display: block !important;
+}