Tile label not centered if label is long

Seems if the label is long there is some padding or margin on the left side that keeps it from getting centered. Regular tiles and super tiles.
image

You’re seeing this in both Super Tiles and Regular Tiles?

Do you have any Custom CSS applied and if so, have you tried on a dashboard without any Custom CSS? I just checked and there’s not any padding applied to the Title/Label:

image

I have some CSS. If I comment out all the .title ones at the top same deal.

I’m not able to reproduce on dashboard with a tile labeled as 'ConcreteShed Door'. I’m not sure what the missing factor is, but I would try starting with a fresh dashboard with no Custom CSS… even with just a single tile and see if you can reproduce.

Another twist, just made a new test dashboard with new Test theme with CSS deleted. And get this. Everything in theme is the same but no CSS. Same scalbale rows, same # columns, same gutter.
image

Hold on, I had 2 themes called test. Here it is with the one without CSS.
image

After a save and refresh it now it back to the one above without the CSS.
image

The latest screenshots all look centered properly whether it’s truncated or not and even with various font sizes and borders.

Still there, not centered if title is long:
image

Shorten by one letter and all good.
image

Happening on non-super tiles also
image

Hi there - thanks for the bump. I moved your post out of Nezmo’s thread as that case was related to Dashboard Tiles that are set to display the ‘label’ as the main content and was reproducible.

In your example, we weren’t able to reproduce it when you created a test dashboard without the Custom CSS and style customizations.

image

Did you put together another sample dashboard with no Custom CSS / Style customizations and you were able to reproduce it? At the very least, we want to start with the minimum (no theme / style customizations) and slowly add things in bit-by-bit until we can reproduce. If you’ve already done this and I missed it in the discussion above, my apologies as I couldn’t find reference of it in my notes.

Yeah, made new dashboard with one tile, with no CSS and no styles on tile. Hero tile editor set to Wrap. Wrap not working so cant repeat the issue.
image

That wrap setting applies to the main content in the Hero Attribute tile. The title / label wrap is in the Dashboard Settings behind the Advanced toggle.

Yes it was! OK, here’s new dashboard, no CSS, no theme. And different computer and screen resolution.
image

There appears to be either a theme and/or inline styles applied as there’s a background image on the dashboard and border on the tiles. :thinking:

Edit: If you want to use the dashboard sharing feature to share the dashboard with support@sharptools.io, I’d be happy to take a closer look, but it would really be helpful to first start with a bare minimum use-case with no themes or styles applied at all to make sure the issue is not reproducible there, then slowly add the individual pieces until we are able to reproduce the issue.

Based on your screenshot above, I suspect it’s because a Tile Radius has been added to the style of the tile.

When the corners of the tiles are rounded, the title has left/right padding added to it and since the word is bigger than the bounding box, it overflows the right padding…

image

I have an idea that could improve this. Unfortunately, there’s no perfect solution when the words are too big to fit into the space – that’s where the Label override on the tile becomes your best friend so the text can be shortened to fit, using spaces as needed to let words wrap:

image

Edit: :point_up_2:This was pushed to beta.

Alternatively, with a bit of Custom CSS, you could truncate just the long words that don’t wrap and keep them within their padded space:

image

It is working in Beta! Thanks…

1 Like