@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>