diff options
author | Simon Nagl <simonnagl@aim.com> | 2016-04-23 18:41:21 +0200 |
---|---|---|
committer | Simon Nagl <simonnagl@aim.com> | 2016-04-28 16:54:23 +0200 |
commit | 33a2a8bf214bb57c3ed145dcec5cbf1aea18bd0e (patch) | |
tree | bb852d7b65b4bbba0a5be9a464ec218c9b5ab776 | |
parent | 444aab651daab58c4e727fffe74ea21bc920cdab (diff) |
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.
-rw-r--r-- | web/dashboard.css | 15 | ||||
-rw-r--r-- | web/dashboard.slate.css | 14 | ||||
-rw-r--r-- | web/index.html | 4 |
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); |