I designed a couple of panels on my laptop and are using a fire hd 8 for my tablet. I get everything laid out in my laptop but it looks totally different on tablet.
@Devin_Morell thanks for posting!
The tiles on SharpTools dashboards will automatically reflow based on the screen width. If youâre looking to have tiles line up a certain way on a certain device, we recommend designing the dashboard for your target device size.
For anyone who is finding this via search, the feedback in this post applies to the legacy Reflowing Dashboards. Creating a new dashboard will default to using Scalable Dashboards making it easier to use the same dashboard across multiple devices of varying screen size.
The most common approaches for designing for a specific tablet size are to either:
- Keep the physical tablet nearby as youâre designing - each time you save your dashboard changes, theyâll instantly be pushed to the tablet
- Simulate the tabletâs browser size by either manually adjusting your browser window or using the Chrome Developer Tools
As noted in this post, if the devices are really close in size sometimes you can adjust the tile size to a custom size that makes the tiles scale just right to layout the same on both devices.
The last approach that some people use is to use the scaling feature native to your browser. For example, in Fully Kiosk Browser (which is commonly used on Fire Tablets), you can use the âInitial Scaleâ setting to scale things up and down to reuse a dashboard with the same ratio - there are trade-offs with this approach though.
2 Likes
I just did a quick test and it looks like the Fire HD 8 fits 5 tiles wide and 3 tiles high with the default Tile Size.
If you adjust the Tile Size to Small (120px) and the spacing/gutter to 5px you can fit 7 tiles wide by 4 high on a Fire HD 8.
1 Like
Thanks for sharing the screenshots. I should have mentioned that if the Chrome Device Emulator doesnât already have your device listed, you would need to manually add it using the effective device resolution.
One thing to keep in mind is that the effective device resolution is different than the physical resolution typically reported in device technical specs as most devices use some sort of scaling. The easiest way to figure this out is to go to https://whatismyresolution.com from your target device and it should show the effective resolution. In the case of the Fire HD 8 itâs 962x601. 
Or you can do it the hard way...
If you prefer doing things the hard way, you can usually look up the resolution and calculate the effective resolution. For example, thereâs a table in the Screen Layout and Resolution | Fire Tablets article by Amazon where they report that the Fire HD 8 has a screen resolution of 1280x800 and a scale factor of 1.33.
So to get the effective screen resolution, you would divide the physical resolution by the scale factor. Eg. 1280 / 1.33 = 962 and 800 / 1.33 = 601⌠giving you an effective screen resolution of 962x601.
So in your custom device profile in Chrome Device Emulator, you would enter something like the following:
Add a Custom Profile
Filled in with Fire HD 8 details
How do I get rid of the blue header
You can add ?kiosk=true in the end of url or click on ... of the desired dashboard in the dashboard list, and select "View (Kiosk Mode).
1 Like
Josh and James. Thanks for your help. Everything worked fine.
2 Likes
Josh - since the update, I am having a difficult time emulating my tablets on the desktop. Before this update I could shrink the browser window to match the tablet layout and then do my editing on the desktop. Even going into emulation mode on chrome wonât match whats on the tablet.
@Greg_Cole thanks for the message and sorry to hear that things arenât working as expected. Can you share some more details on what youâve tried and whatâs not working?
The latest update primary focused on things within a few tile types so itâs unlikely to have impacted things related to screen formatting. I just tried emulating a few different devices and everything seemed to match up on Chrome 79âs device emulator.
Also, if youâre using something like Fully Kiosk Browser on the tablets, keep in mind that if youâve changed the default zoom level (Initial Scale) or have tweaked similar settings, then Fully Kiosk Browser might be rendering things slightly differently.
Josh - found my problem. I had zoomed in which screwed up the scale. Thanks for the quick reply
3 Likes
So, its been kind of a pain in the but setting up my tablet to look exactly the way i want it.
on Chrome on my PC, I had to make a window that mimicks the size of the tablet screen. (Rubberband the window to the size of the device screen)
But what I would like to know, is there a way to just lock Sharptools to alway be, say 60 boxes across, so you cant and any tiles further then 60.
The other problem I ran into is that I could not replicate the exact screen at one point, I had to move all the tiles over to the side, and then push them out one by one to get hem to go in the proper form.
I know this is super hard to explain, but really what I would like to see is a screen locked to a specific size so that I can build a screen one at a time.
when you change the windows size, all the tiles move around, and that is not conducive to setting anything up.
Hi @Eaton_Blumenstein. Thanks for the feedback! I hope you donât mind that Iâve merged your post in with another similar thread.
You can find some details and tips-and-tricks on designing a dashboard for your tablet from a PC in the second post in this thread â.
Thanks for the feedback! Weâve been thinking about a concept of a fixed âcanvasâ that would scale with your browser. Community feedback is a key part of how we prioritize what we work on, so I appreciate your feedback!
3 Likes
ahh⌠thanks⌠the F12 does work, but seems to be a step unneeded. But like you said, I am hopeing there is demand for it! thanks again!
1 Like
I agree with Eaton. This would be a good idea.
1 Like
I third the motion for a fixed canvas. Would be a nice option if from the device you were on (say a tablet) if you could go to settings and select âfix to this deviceâ. Then all instances of ST would be opened unless you revert that setting back.
1 Like
I too want to add my thumbs up for the fixed canvas feature
3 Likes
Iâve gotten to love an extension for Chrome-based browsers (includes Brave) named Window Resizer, It comes pre-populated with several screen resolutions, but you can also add your own favorites. Iâve added the HD Fire 10âs 1920x1200 size. Itâs just a click away now.
1 Like
Just throwing in another request for this feature. For some dashboards, the reactive behavior is fine. But for some dashboards, I would much more design to a grid and have that grid resize no matter which device Iâm looking at.
Take your own sharptools.io website for example. When I maximize the browser on my desktop, screen elements donât go flying all over the place. When its in windowed mode, it doesnât reflow until there isnât enough space to properly show the elements in a desktop view.
There should be an option to say âfixed gridâ or âreactiveâ for dashboards.
Forcing people to design multiple dashboards just to fit various screen layouts is kind of a bummer when a single scaling dashboard would work perfectly fine for most tablets and desktops regardless of screen resolution.
I found a thread from two years ago asking for this - PLEASE add this to the roadmap or move it up the list. I donât want to design the same dashboard over and over again just to fit on multiple similar devices with slightly different resolutions.
2 Likes