If I create a set of labels like the image below and line them up nicely in the designer and I run it in the client, the labels will no longer line up. How can I prevent this? It would be understandable if there was any consistency to the misalignments.
Floating point rounding (which is involved when scaling from the design resolution → runtime resolution) is consistent, but in unpredictable ways.
If you need a specific tabular layout like this… why not use a table?
Or, you could group your components together in a new container - you can then set layout options for that container independent of the window itself.
Or, you could make this label - value - value ‘row’ a template, and use a template repeater component.
Options abound - but the key takeway is that placing components pixel-by-pixel in the designer is almost never the right idea. In Vision, the best practice is to set the window resolution to the lowest screen resolution you will reasonably support and manipulate groups, anchoring, and layout constraints to enlarge gracefully.
1 Like
You didn’t say how you were aligning them, but I’ve have best luck with using the ‘Align two or more in a row / stack’ buttons with the spacing set to 0, then grouping them together (as mentioned by @PGriffith)
This is exactly what I am doing
I can understand scaling has it’s caveats but I am using the alignment tools. The inconsistency in my mind is I have three labels with the same height and located at the same y coordinate but when it scales one is a pixel larger. How does this happen if they are scaled by the same factor.
I cannot use a table because these field are referencing individually unique indirect tags.
Could you elaborate further on how I could utilize a container to fix this?
The designer is a smaller screen than the client, so this is actually an issue with resizing to a larger view.
Sure you can - use a cell update binding. The same applies to the template repeater strategy, which is what I would recommend. You create a 'base' dataset, then use the cell update binding to dynamically update each cell you need from a custom property or tag:
1 Like
I tried using the cell update binding. To an extent this works for me however I am trying to achieve the look of the image below and that just doesn’t seem possible using this. I don’t want a header on the left column but I do for the other two, I want different colored cells, etc.
Ah, okay. For a complex layout like that, a container is probably your simplest option, as long as you don’t need to repeat this structure anywhere else (in which case I’d recommend a template with layout enabled).
Just drop a new Container component on the window and add your components as you see fit, then ‘Anchor’ them to the top left. This will prevent them from resizing or rearranging, even if the container is resized:
