I’ve always had my Fire HD10 dashboards set to scalable row width 5 columns wide. That gives me a 5 x 8 tile screen. I’ve not enough room for what I want to put on each rooms “home” dashboard so want it 6 wide but it doesn’t seem to fit correctly.
5 columns wide. 5 x 8 - all tiles fit on the screen fine
6 columns wide. 6 x 10 - it doesn’t fit vertically. The screen scrolls up and down half a tile.
Am I missing a setting either in the configuration for the dash or in Fully browser? I thought if the number of resulting rows didn’t suit the aspect ratio of the device, Sharptools or the browser should adjust the top and bottom border to suit. I’m after a single fixed page that doesn’t scroll otherwise there will always be half a row off screen. I’ve tried all the available gutter settings but they just increase/decrease the tile size and the screen still shifts.
It would be nice if there was some way of forcing it to adapt. 5 columns works on a Fire and allows 8 rows (portrait) with a perfect fit; whereas 6 columns wide (portrait) leaves a bit off screen with 10 rows or it scrolls up and down a bit with 9 rows. An option to force 6 x 9 that locked the upper and lower margin to fill the screen would be good.
10 rows is too big, and half a row is off the top or bottom of the screen and you have to scroll to see the top/bottom row fully. I’ve removed a row so that it is 6 x 9 and the layout is fixed now, however the gap around the edge of the screen is about 3mm top, left and right but about 18mm at the bottom. I’m being fussy but would prefer the top and bottom empty space to be equal.
You could use custom css to vertically center it. This was the first thing that came up with a search for “css vertical center”. It works for displaying the dashboard but has some minor side effects for editing. It centers the editing buttons too.
For a moment that was awesome…I edited the dashboard in question, added the custom css at the bottom and applied. It has sorted the individual dashboard in question.
Unfortunately now I cannot edit any dashboard at all as I cannot scroll to the top of any page on any dash when viewed on my MacBook.
EDIT: I’ve managed to clear out the custom css in Manage Resources > Themes but I’m back to square one.
And you would only want this style applied to dashboards that are smaller than the full height and need the vertical centering. For dashboards that scroll, this would still vertically center the content and that would be weird as things would be off the top of the screen.
Edited with one last addition of max-height which seems to prevent the clipping issue even on bigger scrollable dashboards.
What I had done was to edit the theme that the dash uses, rather than copy it first then apply the custom css to that copy. Regardless of which of those two code snippets I use, it still leaves the menu bar inaccessible when I want to edit the dash using my MacBook.
I’ll leave it for now as it’s not worth it just to vertically centre the page, but thanks for your help it’s appreciated.
Maybe share a screenshot of what youre seeing? The menus work fine in the latest snippet I shared as the CSS only applies in kiosk mode, so the menus aren’t even visible then.