Adapt dashboard to window size (Responsive dashboard)

Dashboard
,
1

Hi,

I am trying to create dashboard that is responsive to the window/screen size.

image
image1107Ă—472 65.2 KB

I have a css template where I modify the group size to be 95% of the screen width

.nr-dashboard-theme ui-card-panel {
width:95%;
}

So if I make the window wider, the group width adapts to the width of the window (see green border)

image
image1834Ă—472 72.8 KB

However, the group contents stay the same (see yellow border)

I tried to modify the card-container class but it didn't work

.nr-dashboard-cardcontainer {
border: 1px solid yellow;
width:95%;
    }

How can I make the group contents to be responsive as well?
Has anyone tried to do something similar?

Many thanks in advance,
Daniel

2

Hello and welcome.

It is asked many times in different manner but I haven't seen any story of success. It's a figh with implementation which is not meant to be responsive in freely chooseable manner. That's the main reason why almost every time there will be an advise to make your dashboard from scratch or use uibuilder or try flexdash.

But you may try.
Maybe this will be interesting then

2 Likes
3

Thanks for your quick reply.

I am quite new to Node-red and css so I have lots to learn :slight_smile:

I've heard about uibuilder but never had the time to play with it. Never heard of flexdash.

Thanks for the link

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.