Habpanel widgets on Tablets/Smartphone

Hi,

what am i doing wrong? I cant get the widgets to be shown correctly on mobile devices.
I read and searched a lot but couldnt find a solution. Is there anybody who can give a piece of advice?

Find attached a screenshot, i know there are a lot of widgets on the small screen, but its just for presenting the main problem that texts and icons seems to be formatted incorrectly

1 Like

The issue is that some sizes (text, icons) are fixed in the widget’s settings, and this demo configuration wasn’t designed with phones in mind but tablets in landscape orientation. For phones in portrait orientation, Basic UI does a good job adapting the display of sitemaps according to the screen width. HABPanel doesn’t do that (so-called “responsive design”) on purpose because it led to more problems - although there’s an experimental option to enable at the dashboard-level in the latest snapshots.

If you want responsive dashboards, they are quite possible but it’s a more involved task and involves coding and good knowledge of CSS: see for instance here.

Otherwise, the idea is to design your panels and dashboards with the target device in mind - for instance, you could design separate ones for your phone and your tablet. The standard grid for HABPanel dashboards has 12 columns, so if your target device is a phone having widgets smaller than, say, 2x2 or 3x3 make little sense.

Btw, protip: if you want to design for a certain device from your desktop PC, and make sure the widgets’ contents fit in their boxes, you can use the Chrome dev tools (hit F12 when viewing the page) and enable the “Device toolbar”:

Then use the toolbar to find a device similar to yours (or add it):

2 Likes

Thank you for your reply.
This will definitely help me because I now understand the main problem.
Now I get rid of my problem :wink: Thanks

1 Like