scaling header footer with page

[sbaik]

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,

[CraigWeb]

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

[sbaik]

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.

[CraigWeb]

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.

[CraigWeb]

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.

[sbaik]

@craigweb That worked beautifully. Exactly what I was wanting to a T. Thank you so much for sharing that in such detail!

[CraigWeb]

No problem, I'm glad you came right!