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:
I want the dashes replaced with blank space.
I want the same amount of blank space between each parameter:value pair
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
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
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.
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.
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âŚ
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â