Increase the font size of large scalar cards

[cagiraudo]

Hi,

I am new with MetaBase. First of all i want to congratulate the whole team

I have the same problem that this issue that was supposedly fixed in v0.16 #2125

I want to make a dashboards with big numbers to be seen from far in a office, but even if i make the card very big, the font-size of the number doesn't scale

Thanks

• I am using the Chrome browser.
• My computer's OS is Ubuntu.
• I'm running Metabase in ubuntu server
• My database is MySQL.
• My Metabase version is v0.17.0.

⬇️ Please click the 👍 reaction instead of leaving a +1 or update? comment

[kdoh]

Hey there @cagiraudo! Have you tried putting the dashboard in fullscreen mode?. We bump the type size on scalars a bit in that mode to help with longer distance viewing like the use case you're describing.

[cagiraudo]

Hi @kdoh

I tried in fullscreen and it's the same. The number is tiny in the center of the card.

If you need a screen print or more info ask me

[mazameli]

@cagiraudo so technically this is working as intended, but it seems, @kdoh, that we're hearing that people want to have even larger font sizes when they make a scalar card super wide. Any reason why we wouldn't want to do that?

[kdoh]

@mazameli Let me do a bit of testing and confirm @cagiraudo's not hitting some kind of bug / unintended state with a wide scalar in fullscreen. In fullscreen we should definitely make the size reasonably large and I was under the impression it was doing that.

[mazameli]

Ah, maybe my mistake. I had interpreted it as there was a disconnect around what "big" means/should mean.

[cagiraudo]

To make it a litlle more clear.

This is what i have when i make a big number card

And this is what i would expect to see if i make a big number card to display in a LCD

Hope that make it a little more clear

[MrMauricioLeite]

I guess I opened a issue long ago about this.... but apparently did not made it's way to a change in code.

Please, notice that as a dashboard designer we know that the number is going to be super-sized if we get the card to be too big. We expected that. But Metabase forces us to use what it think that is the 'max font size'.

Please change this default behaviour. Please.... 😿

[flamber]

There's currently no way to do this with CSS - well, not in a way, where it doesn't mess up the label.
Solutions are JavaScript or SVG: https://css-tricks.com/fitting-text-to-a-container/

[kevinsimper]

What are the code that needs to be changed for this feature? I tried looking at the frontend code but I could not easily find it.

Also, would it be a setting or just changing the default behavior?

[flamber]

@kevinsimper We're currently working on this - have a look at #21003

[kevinsimper]

@flamber Nice, I added a comment. I think the fontsize either needs to user defined or use a algorithm similar to https://brorlandi.github.io/big-text.js/