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.
Simon Nagl committed
Apr 23, 2016 at 18:41 UTC
33a2a8bf214bb57c3ed145dcec5cbf1aea18bd0e
3 files changed
+19
-14
web/dashboard.css
+9
-6
@@ -10,11 +10,17 @@ body {
10
margin-left: 55px;
11
}
12
13
+netdata-chart-row {
14
+ width: 100%;
15
+ text-align: center;
16
+ display: flex;
17
+ align-items: baseline;
18
+ justify-content: center;
19
+}
20
+
21
+
22
.netdata-container {
14
- display: -webkit-flex; /* Safari */
15
- -webkit-flex-wrap: wrap; /* Safari 6.1+ */
23
display: inline-block;
17
- flex-wrap: wrap;
24
overflow: hidden;
25
26
/* required for child elements to have absolute position */
@@ -31,10 +37,7 @@ body {
37
}
38
39
.netdata-container-with-legend {
34
- display: -webkit-flex; /* Safari */
35
- -webkit-flex-wrap: wrap; /* Safari 6.1+ */
40
display: inline-block;
37
- flex-wrap: wrap;
41
overflow: hidden;
42
43
/* fix minimum scrollbar issue in firefox */
web/dashboard.slate.css
+8
-6
@@ -18,11 +18,16 @@ body {
18
margin-left: 55px;
19
}
20
21
+.netdata-chart-row {
22
+ width: 100%;
23
+ text-align: center;
24
+ display: flex;
25
+ align-items: baseline;
26
+ justify-content: center;
27
+}
28
+
29
.netdata-container {
22
- display: -webkit-flex; /* Safari */
23
- -webkit-flex-wrap: wrap; /* Safari 6.1+ */
30
display: inline-block;
25
- flex-wrap: wrap;
31
overflow: hidden;
32
33
/* required for child elements to have absolute position */
@@ -39,10 +44,7 @@ body {
44
}
45
46
.netdata-container-with-legend {
42
- display: -webkit-flex; /* Safari */
43
- -webkit-flex-wrap: wrap; /* Safari 6.1+ */
47
display: inline-block;
45
- flex-wrap: wrap;
48
overflow: hidden;
49
50
/* fix minimum scrollbar issue in firefox */
web/index.html
+2
-2
@@ -1610,7 +1610,7 @@ function renderPage(menus, data) {
1610
// console.log(' >> ' + menu + ' (' + menus[menu].priority + '): ' + menus[menu].title);
1611
1612
var shtml = '';
1613
- var mhead = '<div style="width: 100%; text-align: center;">' + mainhead;
1613
+ var mhead = '<div class="netdata-chart-row">' + mainhead;
1614
mainhead = '';
1615
1616
// sort the submenus of this menu
@@ -1626,7 +1626,7 @@ function renderPage(menus, data) {
1626
if(menus[menu].submenus[submenu].info !== null)
1627
shtml += '<div class="chart-message netdata-chart-alignment" role="document">' + menus[menu].submenus[submenu].info + '</div>';
1628
1629
- var head = '<div style="width: 100%; text-align: center;">';
1629
+ var head = '<div class="netdata-chart-row">';
1630
var chtml = '';
1631
1632
// console.log(' \------- ' + submenu + ' (' + menus[menu].submenus[submenu].priority + '): ' + menus[menu].submenus[submenu].title);