Fixes #159. Add CSS3 Flexbox for charts in a row.

This fixes the issue that safari sometimes does not align the items in one
streight row.

3 files changed, 19 insertions, 14 deletions

diff --git a/web/dashboard.css b/web/dashboard.css
index a7b090d665..009def6320 100644
--- a/web/dashboard.css
+++ b/web/dashboard.css
@@ -10,11 +10,17 @@ body {
 	margin-left: 55px;
 }
 
+netdata-chart-row {
+	width: 100%;
+	text-align: center;
+	display: flex;
+	align-items: baseline;
+	justify-content: center;
+}
+
+
 .netdata-container {
-	display: -webkit-flex; /* Safari */
-	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
 	display: inline-block;
-	flex-wrap: wrap;
 	overflow: hidden;
 
 	/* required for child elements to have absolute position */
@@ -31,10 +37,7 @@ body {
 }
 
 .netdata-container-with-legend {
-	display: -webkit-flex; /* Safari */
-	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
 	display: inline-block;
-	flex-wrap: wrap;
 	overflow: hidden;
 
 	/* fix minimum scrollbar issue in firefox */
diff --git a/web/dashboard.slate.css b/web/dashboard.slate.css
index 662731061b..0edcc87cf3 100644
--- a/web/dashboard.slate.css
+++ b/web/dashboard.slate.css
@@ -18,11 +18,16 @@ body {
 	margin-left: 55px;
 }
 
+.netdata-chart-row {
+	width: 100%;
+	text-align: center;
+	display: flex;
+	align-items: baseline;
+	justify-content: center;
+}
+
 .netdata-container {
-	display: -webkit-flex; /* Safari */
-	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
 	display: inline-block;
-	flex-wrap: wrap;
 	overflow: hidden;
 
 	/* required for child elements to have absolute position */
@@ -39,10 +44,7 @@ body {
 }
 
 .netdata-container-with-legend {
-	display: -webkit-flex; /* Safari */
-	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
 	display: inline-block;
-	flex-wrap: wrap;
 	overflow: hidden;
 
 	/* fix minimum scrollbar issue in firefox */
diff --git a/web/index.html b/web/index.html
index 7be0bc3b35..502973c3df 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1610,7 +1610,7 @@ function renderPage(menus, data) {
 		// console.log(' >> ' + menu + ' (' + menus[menu].priority + '): ' + menus[menu].title);
 
 		var shtml = '';
-		var mhead = '<div style="width: 100%; text-align: center;">' + mainhead;
+		var mhead = '<div class="netdata-chart-row">' + mainhead;
 		mainhead = '';
 
 		// sort the submenus of this menu
@@ -1626,7 +1626,7 @@ function renderPage(menus, data) {
 			if(menus[menu].submenus[submenu].info !== null)
 				shtml += '<div class="chart-message netdata-chart-alignment" role="document">' + menus[menu].submenus[submenu].info + '</div>';
 
-			var head = '<div style="width: 100%; text-align: center;">';
+			var head = '<div class="netdata-chart-row">';
 			var chtml = '';
 
 			// console.log('    \------- ' + submenu + ' (' + menus[menu].submenus[submenu].priority + '): ' + menus[menu].submenus[submenu].title);