<![CDATA[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

]]>https://forum.mango-os.com/topic/3836/browser-flex-compatibilityRSS for NodeSun, 07 Jun 2026 01:50:44 GMTThu, 11 Oct 2018 15:25:52 GMT60<![CDATA[Reply to Browser / Flex compatibility on Fri, 12 Oct 2018 15:50:55 GMT]]>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.

]]>https://forum.mango-os.com/post/20217https://forum.mango-os.com/post/20217Fri, 12 Oct 2018 15:50:55 GMT<![CDATA[Reply to Browser / Flex compatibility on Thu, 11 Oct 2018 16:39:45 GMT]]>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

]]>https://forum.mango-os.com/post/20208https://forum.mango-os.com/post/20208Thu, 11 Oct 2018 16:39:45 GMT<![CDATA[Reply to Browser / Flex compatibility on Thu, 11 Oct 2018 16:14:02 GMT]]>

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.

]]>https://forum.mango-os.com/post/20207https://forum.mango-os.com/post/20207Thu, 11 Oct 2018 16:14:02 GMT<![CDATA[Reply to Browser / Flex compatibility on Thu, 11 Oct 2018 16:11:47 GMT]]>Hi Mrlucretius

Ill have a look and see what I can find.

]]>https://forum.mango-os.com/post/20205https://forum.mango-os.com/post/20205Thu, 11 Oct 2018 16:11:47 GMT<![CDATA[Reply to Browser / Flex compatibility on Thu, 11 Oct 2018 16:00:09 GMT]]>@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 lon

Ignoring 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>
]]>https://forum.mango-os.com/post/20201https://forum.mango-os.com/post/20201Thu, 11 Oct 2018 16:00:09 GMT<![CDATA[Reply to Browser / Flex compatibility on Thu, 11 Oct 2018 15:56:18 GMT]]>@phildunlap

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

]]>https://forum.mango-os.com/post/20200https://forum.mango-os.com/post/20200Thu, 11 Oct 2018 15:56:18 GMT<![CDATA[Reply to Browser / Flex compatibility on Thu, 11 Oct 2018 15:52:35 GMT]]>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!

]]>https://forum.mango-os.com/post/20199https://forum.mango-os.com/post/20199Thu, 11 Oct 2018 15:52:35 GMT<![CDATA[Reply to Browser / Flex compatibility on Thu, 11 Oct 2018 15:50:49 GMT]]>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>
]]>https://forum.mango-os.com/post/20196https://forum.mango-os.com/post/20196Thu, 11 Oct 2018 15:50:49 GMT<![CDATA[Reply to Browser / Flex compatibility on Thu, 11 Oct 2018 15:36:28 GMT]]>

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.

]]>https://forum.mango-os.com/post/20194https://forum.mango-os.com/post/20194Thu, 11 Oct 2018 15:36:28 GMT