Perspective - evenly spacing various labels of unknown length

I have a perspective display where I want to display a series of batch parameters on a single line. For example, I want a single line of text that looks something like:

Batch ID: 00001----Recipe: Class 3 Widget----Length: 50mm----Weight: 25g

Some values are of relatively fixed format, others (like the recipe) might be 5 characters long or 50 characters long.

Criteria:

  1. I want the dashes replaced with blank space.
  2. I want the same amount of blank space between each parameter:value pair
  3. I want each text label to expand and contract as necessary to fit the required text, maintaining the same amount of blank space on each side
  4. If the view runs out of width, I want certain values to be clipped (and ideally, have something like “…” to show that it’s been clipped to ensure the remaining values have enough space to display. For example, I might clip a long recipe name but leave the date field at the same width
  5. I want the whole resulting string of text centered in the view

I’ve tried using a single text object with a lengthy expression. The problem is that I can’t insert additional spaces in the string to create my “blank space” - it converts any number of spaces into a single space (so did the code formatting above, which is why I had to use dashes to make my point). It also doesn’t offer any easy way to clip text if I need to.

I’ve tried using a flex container in row mode, and setting up individual text labels that have left and right margins to create the blank space between them. This works, but the blank space is inconsistent because I have to give the labels a fixed basis.

What else could I try?

Keep going with your idea for the flex container on row, then use justify ‘space-between’

See attached image, all the label components have a shrink and grow of 0, and basis of ‘auto’, from there I also added the style of ‘textOverflow’ : ‘ellipsis’ to add the ‘…’ if it gets to large.

2 Likes

‘space-around’ may give an even more desirable outcome.

The problem is that I need each label (or text object) to change its size based on the length of its text string, otherwise as well as the spacing between objects, there will be an additional amount of space on each label, i.e. the difference between the width of the label component and the width of the text on it.

edit: just saw your second post - maybe I need to take another look, as obviously you’ve achieved exactly what I was trying to do there…

1 Like

If you use ‘auto’ as the basis, then the component will auto resize to fit the content inside.

1 Like

There's the piece of the puzzle I was missing! Thanks!

1 Like

Flex boxes are extremely powerful, and there is so much that can be done with them, I ordered a poster from this website that stays on the wall behind my desk to always have a reference to the different style options. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Thanks, yeah, I’m redeveloping* a perspective app that was originally done…um…in a particular manner, using almost exclusively .png images and coordinate containers. Couldn’t even scale from a 12.9" iPad to an 11" iPad without breaking everything. Flex containers have been my go to, and you’re right, they’re incredibly powerful once you get a handle on how they work!

*when I say “redeveloping” I mean “rebuilding from scratch, using the original as a visual cue only”

1 Like