diff --git a/production/index3.html b/production/index3.html
index ac9ed448..f649c97b 100755
--- a/production/index3.html
+++ b/production/index3.html
@@ -436,7 +436,7 @@
</div>
<div class="col-md-4 col-sm-6 ">
- <div class="x_panel fixed_height_320">
+ <div class="x_panel tile fixed_height_320">
<div class="x_title">
<h2>Daily users <small>Sessions</small></h2>
<ul class="nav navbar-right panel_toolbox">
diff --git a/production/tables_dynamic.html b/production/tables_dynamic.html
index 3f68d149..28969068 100755
--- a/production/tables_dynamic.html
+++ b/production/tables_dynamic.html
@@ -10,6 +10,7 @@
<title>DataTables | Gentelella</title>
<!-- Bootstrap -->
+ <link href="cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
@@ -18,6 +19,7 @@
<!-- iCheck -->
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<!-- Datatables -->
+
<link href="../vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="../vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="../vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
@@ -292,7 +294,7 @@
<div class="clearfix"></div>
<div class="row">
- <div class="col-md-12 col-sm-12 col-xs-12">
+ <div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_title">
<h2>Default Example <small>Users</small></h2>
@@ -312,6 +314,9 @@
<div class="clearfix"></div>
</div>
<div class="x_content">
+ <div class="row">
+ <div class="col-sm-12">
+ <div class="card-box table-responsive">
<p class="text-muted font-13 m-b-30">
DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: <code>$().DataTable();</code>
</p>
@@ -788,10 +793,13 @@
</tbody>
</table>
</div>
+ </div>
+ </div>
+ </div>
</div>
</div>
- <div class="col-md-12 col-sm-12 col-xs-12">
+ <div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_title">
<h2>Plus Table Design</small></h2>
@@ -811,6 +819,9 @@
<div class="clearfix"></div>
</div>
<div class="x_content">
+ <div class="row">
+ <div class="col-sm-12">
+ <div class="card-box table-responsive">
<p class="text-muted font-13 m-b-30">
DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: <code>$().DataTable();</code>
</p>
@@ -1461,10 +1472,13 @@
</tbody>
</table>
</div>
+ </div>
+ </div>
+ </div>
</div>
</div>
- <div class="col-md-12 col-sm-12 col-xs-12">
+ <div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_title">
<h2>Button Example <small>Users</small></h2>
@@ -1484,6 +1498,9 @@
<div class="clearfix"></div>
</div>
<div class="x_content">
+ <div class="row">
+ <div class="col-sm-12">
+ <div class="card-box table-responsive">
<p class="text-muted font-13 m-b-30">
The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page that will interact with a DataTable. The core library provides the based framework upon which plug-ins can built.
</p>
@@ -1962,8 +1979,11 @@
</div>
</div>
</div>
+ </div>
+ </div>
+ </div>
- <div class="col-md-12 col-sm-12 col-xs-12">
+ <div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_title">
<h2>Fixed Header Example <small>Users</small></h2>
@@ -1983,6 +2003,9 @@
<div class="clearfix"></div>
</div>
<div class="x_content">
+ <div class="row">
+ <div class="col-sm-12">
+ <div class="card-box table-responsive">
<p class="text-muted font-13 m-b-30">
This example shows FixedHeader being styling by the Bootstrap CSS framework.
</p>
@@ -2461,8 +2484,11 @@
</div>
</div>
</div>
+ </div>
+ </div>
+ </div>
- <div class="col-md-12 col-sm-12 col-xs-12">
+ <div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_title">
<h2>KeyTable example <small>Users</small></h2>
@@ -2968,7 +2994,7 @@
</div>
</div>
- <div class="col-md-12 col-sm-12 col-xs-12">
+ <div class="col-md-12 col-sm-12 ">
<div class="x_panel">
<div class="x_title">
<h2>Responsive example<small>Users</small></h2>
@@ -2988,6 +3014,9 @@
<div class="clearfix"></div>
</div>
<div class="x_content">
+ <div class="row">
+ <div class="col-sm-12">
+ <div class="card-box table-responsive">
<p class="text-muted font-13 m-b-30">
Responsive is an extension for DataTables that resolves that problem by optimising the table's layout for different screen sizes through the dynamic insertion and removal of columns from the table.
</p>
@@ -3641,6 +3670,9 @@
</div>
</div>
</div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
diff --git a/src/scss/custom.scss b/src/scss/custom.scss
index 939dbd00..2a7b7472 100644
--- a/src/scss/custom.scss
+++ b/src/scss/custom.scss
@@ -481,6 +481,7 @@
.item{
display:block;
}
+
}
.nav-md .container.body .col-md-3.left_col {
min-height: 100%;
@@ -538,7 +539,7 @@ body .container.body .right_col {
font-size: 17px;
}
.tile, .graph {
- zoom: 85%;
+ zoom: 75%;
height: inherit;
}
.item{
@@ -1464,21 +1465,21 @@ table.jambo_table tbody tr.selected td {
// zoom: 1;
// }
-.dataTables_processing {
- position: absolute;
- top: 50%;
- left: 50%;
- width: 250px;
- height: 30px;
- margin-left: -125px;
- margin-top: -15px;
- padding: 14px 0 2px 0;
- border: 1px solid #ddd;
- text-align: center;
- color: #999;
- font-size: 14px;
- background-color: white;
-}
+// .dataTables_processing {
+// position: absolute;
+// top: 50%;
+// left: 50%;
+// width: 250px;
+// height: 30px;
+// margin-left: -125px;
+// margin-top: -15px;
+// padding: 14px 0 2px 0;
+// border: 1px solid #ddd;
+// text-align: center;
+// color: #999;
+// font-size: 14px;
+// background-color: white;
+// }
// .dataTables_length {
// width: auto;
@@ -1492,10 +1493,10 @@ table.jambo_table tbody tr.selected td {
// text-align: right;
// }
-.dataTables_info {
- width: 60%;
- float: left;
-}
+// .dataTables_info {
+// width: 60%;
+// float: left;
+// }
.dataTables_paginate {
float: right;
@@ -1543,27 +1544,27 @@ table.display thead th:active, table.display thead td:active {
outline: none;
}
-.dataTables_scroll {
- clear: both;
-}
+// .dataTables_scroll {
+// clear: both;
+// }
-.dataTables_scrollBody {
- *margin-top: -1px;
- -webkit-overflow-scrolling: touch;
-}
+// .dataTables_scrollBody {
+// *margin-top: -1px;
+// -webkit-overflow-scrolling: touch;
+// }
-.top, .bottom {}
-.top .dataTables_info {
- float: none;
-}
+// .top, .bottom {}
+// .top .dataTables_info {
+// float: none;
+// }
.clear {
clear: both;
}
-.dataTables_empty {
- text-align: center;
-}
+// .dataTables_empty {
+// text-align: center;
+// }
tfoot input {
margin: 0.5em 0;
@@ -1586,9 +1587,9 @@ td.details {
border: 2px solid #A19B9E;
}
-.example_alt_pagination div.dataTables_info {
- width: 40%;
-}
+// .example_alt_pagination div.dataTables_info {
+// width: 40%;
+// }
.paging_full_numbers {
width: 400px;
@@ -4709,6 +4710,10 @@ ul.notifications {
right: 135px;
top: 7px;
}
+.tile, .graph {
+ zoom: 70%;
+ height: inherit;
+}
}
@media (min-width: 768px) and (max-width: 1024px){
.info-number .badge {