Greetings,
I’m having issues in my Losant app when the browser page changes size. I have a page that shows a dashboard which has three blocks (one next to each other). The issue is that this app needs to be responsive and when I use it from a mobile device the dashboard blocks order stops having “sense”. To give you an example:
This is the correct way to show the blocks:
But this is how it’s currently showing:
Notice how in the first image there is a “Range” block followed by a “Plot” block and last there is a “Settings” block. But when looking the second image, there are three “Settings” bocks on top of each other.
Is there a way to specify how the blocks should behave when changing the screen size?
Hi @Francisco_Alba - welcome to the Losant forums!
I have a few questions here:
- What mobile device / browser are you using?
- How did you obtain the first screenshot? Or is that a mockup of what you believe it should look like?
- When you say that you changed the screen size, do you simply mean that the dashboard displays differently on desktop than on mobile, or are you actually resizing the window?
Once again, thanks for joining us on the Losant forums!
Hi @Sebastian_Turner
1: I’m currently using edge and using the browser developer console device emulator. For reference: I was emulating an iPhone SE screen dimensions.
2: This particular dashboard lists information from multiple channels and for each channel it shows the three blocks that I mentioned before. The first image shows the blocks for the first channel (which are rendering correctly) and the second image shows the “Settings” blocks from another three channels (all of them smashed together even if they are from different channels).
3: When I say “changed the screen size” I’m talking about the device emulator from the developer console. I tested this for multiple screen sizes using that emulator (iPhone SE, iPad Air, Galaxy Fold).
Hope this is of help and thank you for your time.
The issue here is that Dashboards collapse to a single column instead of the grid layout when under a certain screen width. The order they go in is determined by their index value, which is currently not able to be set by the user.
However, I think this is a great feature suggestion. I’ll forward this along to the team and update this thread once I have more information.
Thanks for the reply. As a workaround, for now I decided to clone the existing block in the order that they are meant to be shown and after that I deleted the “originals”. This way when they collapse to a single column the order will be the correct one.
