I plan to design several dashboard style web screens that will have visual elements that may or may not link to additional screens. It is my intent to design these dashboards so that all of the information appears on one screen without scrolling. I realize in a web app that is intended to be viewable across different screen resolutions and device sizes this might be difficult.

The tools for controlling the width of screen elements are easy to use and I have had success with them. For height however, I am struggling. Does anyone have any suggestions on ways to constrain screen elements to render within the screen size without needing to scroll, like how Power BI dashboards look?

Thanks,

Jared

Solution

Hi Jared,


I usually create a custom CSS for a screen like this as it gets very specific elements.


And in css I define the size of the elements using percentage, and I really like using @media in css.

Using @media, you can define the sizes of areas and elements according to the aspect ratio of the screens.


https://www.w3schools.com/cssref/css3_pr_mediaquery.asp


Regards


Eduardo

Solution

Eduardo, thank you for your advice. I guess it might finally be time to start learning CSS!

Jared Slayton wrote:

Eduardo, thank you for your advice. I guess it might finally be time to start learning CSS!

CSS is very important!


Regards,

Eduardo