I am using dashboard as well as dashboard2 on mobile devices. The former seems to have no issues of adapting to be shown on mobile displays / form factors.
But dashboard2 does have some scaling issues.
Especially the specific node ui-gauge-classic. Maybe somebody is reading along here that is working on this node? I would be happy to elaborate, if it could help with anything.
But also in button group nodes for example. Even though they show fine as 3 columns wide on a desktop browser, they sometimes won't fit on a mobile screen, and are broken up.
I suppose one of the issues is pixels/space spend on margins, and the border/background. Perhaps these should be reduced, in order to actually fit 3 full columns.
Is this something that should/will be addressed in dashboard2? If not, are there any recommendations of how it could be managed, for example with custom CSS?
Dashboard2 version 1.21.0 (ui-gauge-classic v1.3.1). Mobile device resolution 1440x3168.
Can you post screenshots showing the problem please? On mobile and in browser.
Also select the nodes in the dashboard group and export them here so we can try your layout for ourselves. We don't need any data, just the nodes. Preferably a group with just a very few widgets in it.
The top gauges are all set to be 2x2 (so I would expect two could fit side-by-side on phone, which is supposed to be 6 columns, right?)
The button groups are set to "auto", but they could fit in width on my older phone. So may have something to do with the specific screen pixel dimensions?
Actually I noticed there is also a problem with Dashboard 1: The page is slightly larger than the view, so it can always be shuffled around a little but. Like 20px in every direction, or something like that. A bit odd
Screenshots included here (last one is from the old phone):
On Mobile, we automatically change the layout to be "3" columns wide, instead of the default 12 at Desktop. As such, any widgets you have with width as "2", will render as 2/3 of the mobile's screen width, e.g. the ui-gauge-classic.
For a given page, you can change the number of columns that render at each resolution via the Page's Settings: Docs
It does look like there are some issues with the classic gauge rendering that that Aspect Ratio/size though.
It is unclear for me how that works. The (physical) width on the mobile device in question is 1440px, so should render with 12 columns? Is there some calculation of "mobile pixels" somewhere?
The physical pixel size is different to the logical pixel size. The logical one will be much less, often it is four physical making up one logical. I can't remember exactly how to get the logical value, probably google will help
Right. So even without figuring the exact logical pixel size, I tried setting the "Default" (lowest) column count to 4 instead of 3. I still don't get two 2x2 gauges next to each other.
Maybe because of some margin/padding or something like that?
And my button groups are still broken up, where they were not previously. And it doesn't seem necessary to me, to line-break them in this case, so I'm not sure what it happens.
Use mobile layout with responsive dimensions so you can see how it behaves with different screen sizes. then find element with class name nrdb-layout-group--grid and turn on the small grid button. That makes grid lines visible thus the situation can be analysed properly.
Interestingly, adding two regular gauges with size 2x2, does show next to each other AND makes the ui-classic-gauge instances also show next to each other. Removing them, still has the classic gauges next to each other. So almost like earlier redeploys+reloads when going to 4 columns did not properly work until adding nodes to the dashboard, or something...
Layout Type is Grid, and I am pretty sure there are no CSS overrides.
Yes, completely sure. And I reloaded too - which usually refreshes everything. If there could be some matter of caching or similar, I don't know.
The classic gauges are now flowing, as I was hoping for.
The button groups are still broken up into several lines. As mentioned this worked on an old device, so my first guess is that it must be the different screen resolution / aspect ratio that causes this (?).
Or maybe it is system related, because some other text lines also wrap. So I guess maybe the font is bigger on this device. I will try playing with that.
But I think this indicates that perhaps the button groups need to be able to better adapt their internal padding on smaller screens, as there is quite a bit of space in and around them.
