Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.
Browser / Flex compatibility
-
Re: Fix Cursor-Point position on ma-serial-chart
Hey Guys,
It has been pointed out that while this page renders fine in Chrome, Firefox and Edge do not pack everything together nicely ( they add lots of vertical space) maybe my Flex is not quite right?
Any ideas / pointers? I am going to go add -xs to various flex tags, maybe they all need that or something?
Also, I am trying to access my cloud mango with iexplore, I can't even get a login prompt (just a static orange circle) any guess what the issue is?
Thanks,
Alex -
Also, I am trying to access my cloud mango with iexplore, I can't even get a loging prompt (just a static orange circle) any guess what the issue is?
Have you tried a hard refresh, i.e. Ctrl+Shift+R ? If that doesn't work you could open the developer tools and check for errors.
-
In iexplore, here is the page source, I se nothing obviously wrong in the Iexplorer development tools:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title ng-bind="titleText">Mango v3</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <base href="/ui/"> <link rel="icon" type="image/png" sizes="192x192" href="/modules/mangoUI/web/img/icon192.png?v=04b2746ec86fd5c5674b8eee6ef2072f"> <link rel="icon" type="image/png" sizes="128x128" href="/modules/mangoUI/web/img/icon128.png?v=933195cd71b13ed0313ef87767b74e66"> <link rel="icon" type="image/png" sizes="96x96" href="/modules/mangoUI/web/img/icon96.png?v=ac12cb02d70c7c36ab6e7c2a7eb5e6e9"> <link rel="icon" type="image/png" sizes="32x32" href="/modules/mangoUI/web/img/icon32.png?v=b86f9773618055c350a46380d04d0714"> <link rel="icon" type="image/png" sizes="16x16" href="/modules/mangoUI/web/img/icon16.png?v=9e1425b2887d1883c266d54478c8af52"> <link rel="apple-touch-icon" type="image/png" sizes="128x128" href="/modules/mangoUI/web/img/icon128.png?v=933195cd71b13ed0313ef87767b74e66"> <link rel="manifest" href="/modules/mangoUI/web/ui/manifest.json?v=6adfd6d26015f7aa95abe22e893d6593"> <link rel="stylesheet" href="/modules/mangoUI/web/ui/styles/preBoot.css?v=5305454c3bd4d8d37740f6c074b2553c"> <meta name="user-styles-after-here" content=""> </head> <body layout="column" ng-class="{'ma-api-down': !mangoWatchdog.apiUp, 'ma-logged-out': !mangoWatchdog.loggedIn, 'ma-mobile': !$mdMedia('gt-sm'), 'ma-phone': $mdMedia('xs')}" md-theme="{{uiSettings.activeTheme}}" md-colors="{background: 'background'}"> <div id="loading-bar-container" md-colors="{color: 'accent-hue-2'}"></div> <div ng-if="::appLoading" class="app-loading"> <svg class="ma-ui-spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> <circle fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30" stroke="#FF8500"></circle> </svg> <div class="pre-bootstrap-error" style="display:none"> <div></div> <a href="#">Show stack trace</a> <pre style="display:none"><code></code></pre> </div> </div> <div ng-cloak ng-if="::noApi" class="missing-module">mangoApi module is required.</div> <div ng-cloak ui-view layout="column" flex class="main-application" ng-class="stateNameClass"></div> <script type="text/javascript" src="/modules/mangoUI/web/mangoUi~ngMango~ngMangoServices.js?v=266e7de4c9596946130c"></script><script type="text/javascript" src="/modules/mangoUI/web/mangoUi~ngMango.js?v=55e88ae4b3f07aeb559e"></script><script type="text/javascript" src="/modules/mangoUI/web/mangoUi.js?v=394867591cffa1b49735"></script></body> </html> -
I removed the link to your Mango. I don't think it's in your interest to post such a thing on the forum. But, because I know who you are, I took a visit and can report it loaded without issue. My first reply was only with regards to the login page not coming up. I've little insight to offer on browser idiosyncrasies!
-
Ok ya thanks. I was gonna pull the link in a bit... I appreciate it.
After so many years of internet, why cannot browsers be standardized? Gah. I used to be a web developer long ago, now I find myself slipping back into the role. Sigh.
-Alex
-
@mrlucretius said in Browser / Flex compatibility:
na pull the link in a bit... I appreciate it.
After so many years of internet, why cannot browsers be standardized? Gah. I used to be a web developer lonIgnoring my IE login issues....
Ok, to be clear, here is the page I am referring to. This loads fine in Chrome, but loads with lots of space (ie vertical packing is not tight) in Firefox, Edge.
I will dig into it but maybe someone has a few pointers?
Thanks,
Alex<div class="ma-designer-root" id="jhodges" style="max-width: 1024px;"> <ma-now output="time" update-interval="1 SECONDS"></ma-now> <div flex="" layout="row" layout-xs="column" layout-fill="" layout-wrap=""> <div flex="" layout-xs="column"> <!-- ##################### chart1: meter 1 charts kWh ######################### --> <div id="title-m1-kWh" style="width:100%; text-align: center;">St. Clair Walker Middle - Total kWh Generated</div> <ma-serial-chart id="chart-m1-kW" style="width:100%; height: 200px;" balloon="true" legend="true" series-1-point="pt_Meter1.kWh" series-1-values="pt_Meter1.kWh_Values" point-title="JHodges.Meter1.kWh" default-type="line" series-1-title="JHodges.Meter1.kWh" export="true"> </ma-serial-chart> </div> <div flex="" layout-xs="column"> <!-- ##################### chart2: meter 1 charts kW ######################### --> <div id="title-m1-kW" style="width:100%; text-align: center;">St. Clair Walker - Realtime kW Generation</div> <ma-serial-chart id="chart-m1-kWh" style="width:100%; height: 200px;" balloon="true" legend="true" series-1-point="pt_Meter1.kW" series-1-values="pt_Meter1.kW_Values" point-title="JHodges.Meter1.kW" default-type="line" series-1-title="JHodges.Meter1.kW"> </ma-serial-chart> </div> </div> <div flex layout="row" layout-xs="column" layout-fill layout-wrap> <div flex layout-xs="column"> <!-- ##################### stats1 ######################### --> <div layout="row"> <div id="lb-m1-title" style="width:100%; height: 25px; text-align: center; margin: 10px;">St. Clair Walker Middle Annual Offsets:</div> </div> <div layout="row"> <div id="lb-m1-miles" style="width:60%; height: 25px; text-align: right;">Miles Driven in a Car:</div> <ma-point-value id="dp-m1-miles" style="width: 40%; height: 25px; text-align: left; margin-left: 20px;" point-xid="DP_4e6c1706-9429-42da-9852-dcdcc74c72b2" enable-popup="hide"></ma-point-value> </div> <div layout="row"> <div id="lb-m1-houses" style="width:60%; height: 25px; text-align: right;">Single House Energy Usage:</div> <ma-point-value id="dp-m1-houses" style="width: 40%; height: 25px; text-align: left; margin-left: 20px;" point-xid="DP_4d6ba9d6-116a-4922-9841-515a22710174" enable-popup="hide"></ma-point-value> </div> <div layout="row"> <div id="lb-m1-forest" style="width:60%; height: 25px; text-align: right;">Acres of U.S. Forest:</div> <ma-point-value id="dp-m1-forest" style="width: 40%; height: 25px; text-align: left; margin-left: 20px;" point-xid="DP_2dc969dd-e452-4ead-b321-b95d9e726058" enable-popup="hide"></ma-point-value> </div> <div layout="row"> <div id="lb-m1-co2" style="width:60%; height: 25px; text-align: right;">Metric Tons of CO2:</div> <ma-point-value id="dp-m1-co2" style="width: 40%; height: 25px; text-align: left; margin-left: 20px;" point-xid="DP_b6888a31-5473-4af1-bb40-e300767de812" enable-popup="hide"></ma-point-value> </div> </div> <div flex="" layout-xs="column"> <!-- ##################### gauges m1 ######################### --> <div flex layout="row"> <div layout="column" style="width: 50%;"> <ma-gauge-chart id="gauge-m1-irradiance" style="width: 200px; height: 200px; margin-left: auto;" point-xid="JHodges_DP_e0f6a6e0-1022-42af-8d0b-a7a87f0189ca" end="1300" start="0" interval="100" band3-color="rgb(0, 163, 0)" band3-end="1300" band2-end="800" band1-color="rgb(255, 0, 0)" band1-end="400"></ma-gauge-chart> </div> <div layout="column" style="width: 50%;"> <ma-gauge-chart id="gauge-m1-kW" style="width: 200px; height: 200px; margin-right: auto;" point-xid="JHodges_DP_4d0640de-59a5-488c-8f90-6924dcf44be5" end="500" start="0" interval="100"></ma-gauge-chart> </div> </div> </div> </div> <div flex="" layout="row" layout-xs="column" layout-align="space-between" layout-fill="" layout-wrap=""> <div flex="" layout-xs="column"> <!-- ##################### chart3: meter 2 chart kW ######################### --> <div id="title-m2-kWh" style="width:100%; text-align: center;">Elementary School - Total kWh Generated</div> <ma-serial-chart id="chart-m2-kW" style="width:100%; height: 200px;" balloon="true" legend="true" series-1-point="pt_Meter2.kWh" series-1-values="pt_Meter2.kWh_Values" point-title="JHodges.Meter2.kWh" default-type="line" series-1-title="JHodges.Meter2.kWh" export="true"> </ma-serial-chart> </div> <div flex="" layout-xs="column"> <!-- ##################### chart4: meter 2 chart kW ######################### --> <div id="title-m2-kW" style="width:100%; text-align: center;">Elementary School - Realtime kW Generation</div> <ma-serial-chart id="chart-m2-kWh" style="width:100%; height: 200px;" balloon="true" legend="true" series-1-point="pt_Meter2.kW" series-1-values="pt_Meter2.kW_Values" point-title="JHodges.Meter2.kW" default-type="line" series-1-title="JHodges.Meter2.kW"> </ma-serial-chart> </div> </div> <div flex="" layout="row" layout-xs="column" layout-align="space-between" layout-fill="" layout-wrap=""> <div flex layout-xs="column"> <!-- ##################### stats2 ######################### --> <div layout="row"> <div id="lb-m2-title" style="width:100%; height: 25px; text-align: center; margin: 10px;">Elementary School Annual Offsets:</div> </div> <div layout="row"> <div id="lb-m2-miles" style="width:60%; height: 25px; text-align: right;">Miles Driven in a Car:</div> <ma-point-value id="dp-m2-miles" style="width: 40%; height: 25px; text-align: left; margin-left: 20px;" point-xid="DP_c1da17c5-d74e-4aac-8abb-206d6c659ca8" enable-popup="hide"></ma-point-value> </div> <div layout="row"> <div id="lb-m2-houses" style="width:60%; height: 25px; text-align: right;">Single House Energy Usage:</div> <ma-point-value id="dp-m2-houses" style="width: 40%; height: 25px; text-align: left; margin-left: 20px;" point-xid="DP_5a2e9fc3-f3f7-48b7-8deb-ea2b94acadf5" enable-popup="hide"></ma-point-value> </div> <div layout="row"> <div id="lb-m2-forest" style="width:60%; height: 25px; text-align: right;">Acres of U.S. Forest:</div> <ma-point-value id="dp-m2-forest" style="width: 40%; height: 25px; text-align: left; margin-left: 20px;" point-xid="DP_e2f44dbe-151d-43d3-a124-bb335bd1e81e" enable-popup="hide"></ma-point-value> </div> <div layout="row"> <div id="lb-m2-co2" style="width:60%; height: 25px; text-align: right;">Metric Tons of CO2:</div> <ma-point-value id="dp-m2-co2" style="width: 40%; height: 25px; text-align: left; margin-left: 20px;" point-xid="DP_627b4c23-461a-47f8-9d44-437d54b7128c" enable-popup="hide"></ma-point-value> </div> </div> <div flex="" layout-xs="column"> <!-- ##################### gauges m2 ######################### --> <div flex="" layout="row"> <div layout-xs="column" style="width: 50%;"> <ma-gauge-chart id="gauge-m2-irradiance" style="width: 200px; height: 200px; margin-left: auto;" point-xid="JHodges_DP_e0f6a6e0-1022-42af-8d0b-a7a87f0189ca" end="1300" start="0" interval="100" band3-color="rgb(0, 163, 0)" band3-end="1300" band2-end="800" band1-color="rgb(255, 0, 0)" band1-end="400"></ma-gauge-chart> </div> <div layout-xs="column" style="width: 50%;"> <ma-gauge-chart id="gauge-m2-kW" style="width: 200px; height: 200px; margin-right: auto;" point-xid="JHodges_DP_1ec557de-0f77-4436-bf2c-3d276e4ccabf" end="500" start="0" interval="100"></ma-gauge-chart> </div> </div> </div> </div> <!-- ##################### meter 1 ma-point-values ######################### --> <ma-point-values id="pt-m1-kWh" style="width:100%; height: 20px;" to="dateBar.to" from="dateBar.from" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" rollup="SIMPLIFY" values="pt_Meter1.kWh_Values" point="pt_Meter1.kWh" point-xid="JHodges_DP_ec50e6e5-95bb-40f2-850c-96c7c712baa8"> </ma-point-values> <ma-point-values id="pt-m1-kW" style="width:100%; height: 20px;" to="dateBar.to" from="dateBar.from" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" rollup="SIMPLIFY" values="pt_Meter1.kW_Values" point="pt_Meter1.kW" point-xid="JHodges_DP_4d0640de-59a5-488c-8f90-6924dcf44be5"> </ma-point-values> <!-- ##################### meter 2 ma-point-values ######################### --> <ma-point-values id="pt-m2-kWh" style="width:100%; height: 20px;" to="dateBar.to" from="dateBar.from" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" rollup="SIMPLIFY" values="pt_Meter2.kWh_Values" point="pt_Meter2.kWh" point-xid="JHodges_DP_c56ff01c-a145-408d-bdfb-65322622c164"> </ma-point-values> <ma-point-values id="pt-m2-kW" style="width:100%; height: 20px;" to="dateBar.to" from="dateBar.from" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" rollup="SIMPLIFY" values="pt_Meter2.kW_Values" point="pt_Meter2.kW" point-xid="JHodges_DP_1ec557de-0f77-4436-bf2c-3d276e4ccabf"> </ma-point-values> </div> -
Hi Mrlucretius
Ill have a look and see what I can find.
-
Ignoring my IE login issues....
We expressly do not support IE. If it works, okay, but it's not something we address. Chrome, Firefox, and Edge should all work.
-
I dont know why anyone supports iexplore....
I think I resolved the issue. Thanks to you guys who reminded me about the dev tools and how to use them.
The main flex rows need to NOT have a "layout-fill" attribute, while the columns do have a "layout-fill" attribute.
Like so correct for Firefox (Edge ? I cannot test at the moment):
<div class="ma-designer-root" id="jhodges" style="max-width: 1024px;"> <ma-now output="time" update-interval="1 SECONDS"></ma-now> <div flex="" layout="row" layout-xs="column" layout-wrap> <div flex="" layout-xs="column" layout-fill layout-wrap>Incorrect: (works for chrome but not firefox) the "row" column should not have the "layout-fill" attribute:
<div class="ma-designer-root" id="jhodges" style="max-width: 1024px;"> <ma-now output="time" update-interval="1 SECONDS"></ma-now> <div flex="" layout="row" layout-xs="column" layout-fill layout-wrap> <div flex="" layout-xs="column" layout-fill layout-wrap>Thanks,
Alex -
Hi mrlucretius
I got lucky and the first thing I tried was to remove the first div:
<div class="ma-designer-root" id="jhodges" style="max-width: 1024px;">. I actually always remove the default div that the designer creates when I do responsive pages.
