make style improvements

AllenFang · Dec 29, 2015 · 8e43d26 · 8e43d26
1 parent fe2ec20
commit 8e43d26
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/css/react-bootstrap-table.css b/css/react-bootstrap-table.css
@@ -54,9 +54,6 @@
   width: 100%;
 }
 
-.react-bs-container .tool-bar{
-  margin-bottom: 5px
-}
 /*inline editor default style*/
 .react-bs-container .form-control.editor{
   /*width:100%;

diff --git a/src/pagination/PaginationList.js b/src/pagination/PaginationList.js
@@ -67,6 +67,7 @@ class PaginationList extends React.Component {
     this.totalPages = Math.ceil(this.props.dataSize / this.state.sizePerPage);
     var pageBtns = this.makePage();
     var pageListStyle = {
+      float:" right",
       marginTop: "0px"  //override the margin-top defined in .pagination class in bootstrap.
     }
 
@@ -79,15 +80,18 @@ class PaginationList extends React.Component {
     });
 
     return (
-      <div className="row">
+      <div className="row" style={{ marginTop: 15 }}>
         <div className="col-md-6">
         {
           this.props.sizePerPageList.length > 1 ?
           <div className="dropdown">
             <button className="btn btn-default dropdown-toggle" type="button" id="pageDropDown" data-toggle="dropdown"
                     aria-expanded="true">
               {this.state.sizePerPage}
-              <span className="caret"/>
+              <span>
+                {" "}
+                <span className="caret"/>
+              </span>
             </button>
             <ul className="dropdown-menu" role="menu" aria-labelledby="pageDropDown">
               {sizePerPageList}

diff --git a/src/toolbar/ToolBar.js b/src/toolbar/ToolBar.js
@@ -119,7 +119,9 @@ class ToolBar extends React.Component{
             <i className="glyphicon glyphicon-trash"></i> Delete
           </button>:null;
     var searchTextInput = this.props.enableSearch?
-      <input type='text' placeholder={this.props.searchPlaceholder?this.props.searchPlaceholder:'Search'} onKeyUp={this.handleKeyUp.bind(this)}/>:null;
+      <div className="form-group form-group-sm">
+        <input type='text' placeholder={this.props.searchPlaceholder?this.props.searchPlaceholder:'Search'} onKeyUp={this.handleKeyUp.bind(this)}/>
+      </div>:null;
     var modal = this.props.enableInsert?this.renderInsertRowModal(modalClassName):null;
     var warningStyle = {
       display: "none",
@@ -131,13 +133,17 @@ class ToolBar extends React.Component{
               <i className="glyphicon glyphicon-export"></i> Export to CSV</button> : null;
 
     return(
-      <div>
-        <div className="btn-group btn-group-xs" role="group" aria-label="...">
-          {exportCSV}
-          {insertBtn}
-          {deleteBtn}
+      <div className="row">
+        <div className="col-xs-9">
+          <div className="btn-group btn-group-sm" role="group">
+            {exportCSV}
+            {insertBtn}
+            {deleteBtn}
+          </div>
+        </div>
+        <div className="col-xs-3">
+          {searchTextInput}
         </div>
-        {searchTextInput}
         <Notifier ref="notifier"></Notifier>
         {modal}
       </div>