<![CDATA[scaling header footer with page]]>I am trying to figure out how to scale the blue tool bar above and the "powered by Mango Automation v3.2.2 ..." footer. I removed them from view completely by placing the pages at root level, but it didn't have the logout function and more importantly the dateBar for the watch list charts.
On a phone, those two things mentioned are overwhelmingly large especially when zooming in. The customer we built this frontend for is primarily using phones.

Thanks in advance,

]]>https://forum.mango-os.com/topic/3374/scaling-header-footer-with-pageRSS for NodeFri, 15 May 2026 23:57:15 GMTWed, 28 Mar 2018 16:46:19 GMT60<![CDATA[Reply to scaling header footer with page on Tue, 03 Apr 2018 12:22:29 GMT]]>No problem, I'm glad you came right!

]]>https://forum.mango-os.com/post/17887https://forum.mango-os.com/post/17887Tue, 03 Apr 2018 12:22:29 GMT<![CDATA[Reply to scaling header footer with page on Mon, 02 Apr 2018 15:15:56 GMT]]>@craigweb That worked beautifully. Exactly what I was wanting to a T. Thank you so much for sharing that in such detail!

]]>https://forum.mango-os.com/post/17877https://forum.mango-os.com/post/17877Mon, 02 Apr 2018 15:15:56 GMT<![CDATA[Reply to scaling header footer with page on Mon, 02 Apr 2018 09:37:09 GMT]]>Hi Sbaik

I decided to play around with my UI and explore the watchlist API a little. It is quite easy to achieve what you looking to do add the following code, to and your own date picker:

<div class="ma-designer-root" id="dd507d66-beac-4c6b-9286-e8c1af134436" style="width: 1366px; height: 768px; position: relative;">
    
    <div layout="row" layout-xs="column">
    <md-input-container flex="">
        <label>Preset</label>
        <ma-date-range-picker from="from" to="to" preset="LAST_1_DAYS" update-interval="5 seconds"></ma-date-range-picker>
    </md-input-container>
    <md-input-container flex="">
        <label>From date</label>
        <ma-date-picker ng-model="from"></ma-date-picker>
    </md-input-container>
    <md-input-container flex="">
        <label>To date</label>
        <ma-date-picker ng-model="to"></ma-date-picker>
    </md-input-container>
    </div>

Then in your watchlist html code edit the To and From attributes as follows.

   <ma-watch-list-chart id="436ab6ea-d020-4b10-9d30-deb74166780e" watch-list="designer.watchList" 
   points="designer.points" from="from" to="to" rollup-type="dateBar.rollupType" rollup- 
   intervals="dateBar.rollupIntervals" rollup-interval-period="dateBar.rollupIntervalPeriod" simplify- 
   tolerance="dateBar.simplifyTolerance" style="position: absolute; width: 400px; height: 200px; left: 155px; top: 201px;"> 
   </ma-watch-list-chart>

You can then take your page back to the root level and you wont have the top Bar and your watchlist will use the new date picker you added.

]]>https://forum.mango-os.com/post/17875https://forum.mango-os.com/post/17875Mon, 02 Apr 2018 09:37:09 GMT<![CDATA[Reply to scaling header footer with page on Thu, 29 Mar 2018 15:31:32 GMT]]>Nice Dashboards btw. I am also mainly doing water monitoring and it is nice to see what other people are doing. I think if you really want to get rid of the bar you will need to add a date picker into your UI so you can put it back to root level. Should fit just above your watch list. There is a demo code in the mango basics examples area. Once you got that done you'll need to set your watchlists
"from" and "to" to the same variables as your ng-model variable on the date-pickers.
hope you come right, I haven't done this before, this is just what i've picked-up from reading the API docs.

]]>https://forum.mango-os.com/post/17865https://forum.mango-os.com/post/17865Thu, 29 Mar 2018 15:31:32 GMT<![CDATA[Reply to scaling header footer with page on Thu, 29 Mar 2018 12:55:25 GMT]]>This is on a Samsung s8 factory browser. I've looked at it on a iPhone 8 with Safari with same result.
The page is set to scale obviously, and it would fill up the screen better without the blue bar above it. But the worst part is when you zoom.

alt text
alt text
alt text

]]>https://forum.mango-os.com/post/17864https://forum.mango-os.com/post/17864Thu, 29 Mar 2018 12:55:25 GMT<![CDATA[Reply to scaling header footer with page on Thu, 29 Mar 2018 05:50:38 GMT]]>@sbaik
Hi there could you maybe take a screen shot with your phone. I have tested my UIs on about 8 different phones and all my UIs scale nicely.
Also have you added the page to your home screen? you gain some extra pixels by doing that.

]]>https://forum.mango-os.com/post/17858https://forum.mango-os.com/post/17858Thu, 29 Mar 2018 05:50:38 GMT