# Vision Component Layout **URL:** \ **Category:** Ignition\ **Tags:** vision\ **Created:** [January 24, 2022, 5:44pm UTC](https://forum.inductiveautomation.com/t/vision-component-layout/55317 "2022-01-24T17:44:12Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [January 24, 2022, 5:44pm UTC](https://forum.inductiveautomation.com/t/vision-component-layout/55317/1 "2022-01-24T17:44:12Z")
I always seem to have issues setting up components in layouts properly so that they’re displayed “correctly” (the same in designer and in client). For example. I have this window made up of a bunch of components and looks like so in the designer: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/e/9e7c342a3479b44a44ea2e80732aa53b50ea2e3a.png) but in the client, it looks like this: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/7/37e2c01eb52939475d43750c832e88b32e6b0c77.png) Why does the tab strip move? Why does the text get shifted in some places and truncated in others? This behavior is repeated with both relative and anchored layouts. I have the popup window set to un-resizable and un-maximizable. Even pressing the preview button inside of the designer shows it correctly, so why is it messed up in the client? ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [January 24, 2022, 7:41pm UTC](https://forum.inductiveautomation.com/t/vision-component-layout/55317/2 "2022-01-24T19:41:21Z")
The designer always uses fixed pixel coordinates, no scaling for resolution. The client can scale. Each window and container and component has layout properties that control its scaling behavior, if any, and the impact on fonts. You should study [that part of Inductive University](https://inductiveuniversity.com/videos/component-layout/8.1). ---
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [January 24, 2022, 8:23pm UTC](https://forum.inductiveautomation.com/t/vision-component-layout/55317/3 "2022-01-24T20:23:36Z")
I’ve watched it a few times. It says to use anchored layout for things like forms and tables, which is pretty much what this is. Everything on my Window is anchored to the top left (every component, and every component within the groups). Layouts are enabled for the window. It looks more-or-less correct on 1440p: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/d/1d6e97fa2f470608e123565e313150e3a4353df1.png) But not on 1080p: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/d/7dbfd5202f40f1f5112bd66cd824cff905d6877e.png) I just don’t understand how I’m supposed to line things up and have it scale correctly. ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [January 24, 2022, 10:15pm UTC](https://forum.inductiveautomation.com/t/vision-component-layout/55317/4 "2022-01-24T22:15:51Z")
One of the first rules for Vision: Design at the smallest size practical - ideally, _lower_ than any actual client’s resolution. It’s much, much easier to Vision to scale _up_ practically than to scale down. It’s unfortunate that your design has the tab strip ‘anchored’ to the right size. There’s no good way to do that in Vision, because the tab strip just isn’t flexible in that way (it’s not a ‘real’ JTabbedPane, it’s a custom component pretending to be one). You could maybe switch to using something like a multi-state button; it’ll require more effort to look the same, but not that much. Where is the padding around the outside coming from? I would do that with a thick border on the root container, rather than trying to position components “inside” the edges - that way, there’s no way for a component to sneak ‘past’ the edge, also. ---
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [January 24, 2022, 11:01pm UTC](https://forum.inductiveautomation.com/t/vision-component-layout/55317/5 "2022-01-24T23:01:11Z")
Thanks for the idea on the workaround for that right-justified tab strip. I’ll do that since I’m using a script anyway, as this is a popup window. I have designed it to look correct in the client at 1080p client 1080p: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/a/ba6364cdd455105da1cec0c19f7e5e7efec27912.png) However, the text doesn’t quite scale correctly. client 1440p: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/f/bf0553b29727baa6f15ed2dc783a3ce558ebb3e6.png) Is this due to the text size being an integer? ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [January 24, 2022, 11:37pm UTC](https://forum.inductiveautomation.com/t/vision-component-layout/55317/6 "2022-01-24T23:37:44Z")
Are your unit labels separate labels on the root container? You could try grouping/containering the value + label, or even making a template for the repeated unit + label set. Then you shouldn’t have to worry about overlap and scaling quite as much. ---
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [January 25, 2022, 2:16pm UTC](https://forum.inductiveautomation.com/t/vision-component-layout/55317/7 "2022-01-25T14:16:19Z")
Right now I have each row (within each box) as a single line. I think separating the labels may alleviate that scaling issue. Thanks