Inconsistent sizes and spacing between the progress gauge and title in tall_gauge_stat_card #691
Replies: 2 comments 1 reply
-
Here is a minimum reproducible example: https://gist.github.com/mtanco/4b39b58a75a886e9786325b3300be342 Not in this example, but it looks like any white space in the form of new lines or tabs ( |
Beta Was this translation helpful? Give feedback.
-
The stats cards have been designed to display contents by trying to fit them inside the available area. Seems like that is working as intended. In your case, because the title sizes vary across the set, this has unintended consequences. The ignoring of white-space is not special to Wave: How whitespace is handled by HTML, CSS, and in the DOM. We can, however, make the some of the card titles/labels across Wave respect newlines so that we have a workaround for your situation (WDYT @mturoci? - it baffles most people new to HTML). In general the cards used in a page layout work best when their titles/content are curated. In your case, the labels are derived from the data, in which case I would argue that a visualization like a bar/column chart would be a more compact and comprehensible representation of that information compared to gauges (although the gauges might look prettier). |
Beta Was this translation helpful? Give feedback.
-
As it can be seen in the screenshot when text length for the title varies for different cards it leads to inconsistent progress gauge size.
I am OK to limit the size of the text so that title text would cover only 2 lines. But again for shorter text some cards will have 1 line title and some 2 lines. Limiting the title text to only 1 line would be too short.
I have tried a workaround by adding white spaces to short texts to force all the text to have the same size, but it seems the card substitutes multiple whitespace with single whitespace.
What would be the best way to make the gauges to have consistent sizes?
Beta Was this translation helpful? Give feedback.
All reactions