Issue with icon sizing on Super Tile

SharpTools.io (web)
1

I just created a super tile 1x1 dimensions and looks like this:

image
image558×558 12.8 KB

and yet on the dashboard it displays like this:

image

I do have the following set:

/* Set default for all tiles */
.tile .title { top:70%; font-size: 2vh }
.tile .icon svg { width: 45%; height: 45%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); }
.tile .tile-footer { text-align: center; bottom: unset; top:85%; font-size: 2vh}
.tile .tile-footer .status span.right { float: inherit !important; }

/* Set default for all active tiles /
/ .tile.active .icon { width: 100%; height: 100%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); } */

/* Set default for all switch tiles */
.tile.hero-attribute [data-attribute=“switch”] svg {width: 45%; height: 45%; margin: 0; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); }

I do have other css but I don’t think anything is relevant to this. But this doesn’t seem to impact the icon size when I add a tile with this same icon. What am I doing wrong? Thanks.

2

It’s probably the CSS lines around .tile .icon

It looks like this second one is commented out, so it likely isn’t an issue.

For the first one, you could exclude Super Tiles from the CSS targeting:

.tile:not(.super-tile) .icon svg { ...yourcontent... }

:warning: As usual, any CSS snippets provided are not officially supported and may require tweaks with future updates of the app

You could also verify that the CSS is conflicting by creating a brand-new dashboard without any Theme or Custom CSS. Then add the Super Tile to that ‘clean’ dashboard.

1 Like