Fix Interfering Footer on Big Page?

[mrlucretius]

Morning,

We made a page, and there is a Mango Automation footer interfering. Suggestions? running latest Mango, Chrome.

Is it possible for me to disable the footer?

Thanks,
Alex

[mrlucretius]

To add some detail:

I know I can set the height of the Dashboard in pixels, this addresses the footer issue on a computer, I can set the height tall enough that the footer does not interfere.

However, if I expand the DateBar drop down, then the page does not compensate for the added drop down height. I think this is an issue that can be addressed.

Also, if I set the height very tall to avoid footer issues, then the view of the page on a cell phone browser suffers (ie, the charts get very small as the page height is increased). Maybe this is a whole different discussion... Thoughts, suggestions?

Thanks,
Alex

[ThomasEinasto]

Thats due to elements having position:absolute.

I would suggest using flex while building your page as it would make your pages more flexible and compatible with mobile devices and smaller devices which have less pixels on screen.

See for an example on how @Jared-Wiltshire has made the admin home page here : https://github.com/infiniteautomation/ma-dashboards/blob/main/UI/web-src/ui/views/home.html

See these for understanding flexing

https://material.angularjs.org/latest/layout/options
https://material.angularjs.org/1.1.4/layout/children

Thomas

[CraigWeb]

HI Alex

Are you using the auto scale as in this document ?https://help.infiniteautomation.com/enabling-auto-scale/

Could you paste your pages html here. So I can see whats going on.

[mrlucretius]

Hi,

Thanks guys for the suggestions. I am new to this game so I am learning new things every time i fiddle.

I added the "auto scale" per your suggestion... This fixes the footer interference as long as my page height is tall enough for everything to fit.

I an not familiar with flex but I will read up and learn about it and implement it.... Looks like that is the proper way to do these things.

For the cell phone view the issue stands (ie, the dashboard does not scale up to cell phone screen size) but I assume flex will probably address this?

I did not attach the page source, since it is working now, but let me know if you want to see it still.

Thanks and Regards,
Alex

[CraigWeb]

Hi

As Thomas said the issue is probably still caused by the fact that u have absolute positioning. If you use the drag and drop designer, your elements will have an absolute position. This will always cause issues on different size screens. If you want your page to dynamically adjust to the screen size. You will need to use angularjs flex.
Flex uses percentages of the available screen size instead of pixels.