Manage dashboard for responsive design

Dashboard
1

Hello,
I'm trying to sort the widgets and groups properly, so they have a good look on pc as on smartphone aswell. But I have some troubles with it.

Atm I have it like this on my pc, and I would like to keep it that way:

image
image1049×659 26.7 KB

All the widgets there are in one group, I eddited the position with the layout overview. But as you can imagine, when I'm trying to look at it on mobile phone, so i need to scroll to the right and this is unusual for mobile phone. Its better to scroll down.

So I added 2 more groups. An the groups are on wide screens beside each other and on mobile screen under each other, that is really good, but now when I try to achieve the same layout as shown in the picture, I need to add spacer to my groups. But the spacer stay on mobile screen aswell, so there is one big gap between the groups and thats not so nice.

Is there a way to hide the spacer when small screen is using? Maybe something with @media-screen?
Or is there an other way to achieve my desired layout without building own dashboard?

2

You can't do it that way. As I told you before, you'll need to respect the underling card layout system. You can do the tricks i'v shown only if you target your layout for one screen size. But if targeted for many screen sizes such tricks will contradict with logic which is in here to cover the responsiveness.

If you are creating the user interface where the look is very important, the card layout system may be major obstacle. If it does not fit into the design you can't use it. If you need freedom to realize the art, you'll need to build it from scratch. There is ui builder node created to cover this kind of needs..

3

Ok that was what I needed to know.
I'm happy with dashboard and so I need to adapt my designt to its layout system.

4

You could duplicate the tab and have two different layouts, one for PC and one for mobile. Then select the one you want dependent on which device you are using.
I don't know whether something clever could be done to hide the ones you shouldn't be using based on what device you are using.

5

Hey thats really cool idea. That would solve my troubles. Can you give me a hint how to achieve this? I guess I have to use ui_control to open the "right" tab depended on device I'm using.

6

No, that is why I said I don't know how to do it.

7

maybe @hotNipi can help?

I've found this function on w3scools and this function works for dashboard, but instead of switching backgound color I need generate msg.payload for ui_control. And then I can manage my tabs. Could oyu help with the function pls?

<script>
function myFunction(x) {
  if (x.matches) { // If media query matches
    document.body.style.backgroundColor = "yellow";
  } else {
   document.body.style.backgroundColor = "pink";
  }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
</script>
8

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