Dashboard desktop lay-out responsive? - iccube-reporting

Question

Building icCube dashboards for different devices is handled via lay-outs. This works nice. But when it comes to desktop dashboards, there is a wide range of screen-sizes and resolutions and you can make only one desktop lay-out.
For example, I've a 15" laptop for on the read that is connected to a 27" monitor on my workbench if I'm in the office. On my monitor I've far more space to have more widgets then on my laptop screen. It would be nice to create separate lay-out for different screen-sizes / screen-resolutions or make a responsive dashboard.
I'm curious if there is a solutions to handle different screen-sizes / screen-resolutions.

Answer 1

We have not yet found a responsive layout that resolved our questions. We are open to ideas, but it's not simple to have a same dashboard that 'works' on both a 10'' and 27'' monitor.
For now you have a few options in icCube :
Create a fixed layout (it's one of the options we prefer)
Create a layout that scales with the size of the screen
Create a report with multiple layouts (this is for tablets, phones, printing). Not yet for different screen sizes.
And indeed you might create a set of different reports.
_hope it helps.

Answer 2

Simple dashboard grid layout
<div class="grid-container">
<header class="header"></header>
<aside class="sidenav"></aside>
<main class="main"></main>
<footer class="footer"></footer>
</div>
Need to apply CSS
/* Simple dashboard grid CSS */
/* Assign grid instructions to our parent grid container */
.grid-container {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 50px 1fr 50px;
grid-template-areas:
"sidenav header"
"sidenav main"
"sidenav footer";
height: 100vh;
}
/* Give every child element its grid name */
.header {
grid-area: header;
background-color: #648ca6;
}
.sidenav {
grid-area: sidenav;
background-color: #394263;
}
.main {
grid-area: main;
background-color: #8fd4d9;
}
.footer {
grid-area: footer;
background-color: #648ca6;
}
Create the styles and structure for our header and footer elements; grid-area declared previously
<style>
.header, .footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
background-color: #648ca6;
}
</style>
<header class="header">
<div class="header__search">Search...</div>
<div class="header__avatar">Your face</div>
</header>
<footer class="footer">
<div class="footer__copyright">© 2019</div>
<div class="footer__signature">Sample</div>
</footer>