Center a label relative to another label

Ignition
,
1

Is there a way to center a label relative to another label?

2

Try these buttons at the top of the designer, specifically the circled one for align vertically.

image

3

That’s for vision? Isn’t it?

4

It's in perspective too, if you are using a coordinate container, that is.

5

Yes sorry, I didn’t specify, I’m using flex containers.

6

'Alignment' relative to other components is a concept that doesn't apply to flex containers.

1 Like
7

I use labels with no text as spacers to line up my components. You could use these to adjust another flex row container's position to line up with the first label and then set that row container to center content and place your second label in that.

Edit: Don't do this, bad practice

1 Like
8

Nooo, this is what the css props:

  • padding
  • margin
  • gap
  • grow
  • shrink
  • basis

are for!

By adding wasteful components to the dom, you're slightly reducing performance each time

6 Likes
9

After I discovered gap worked on more than just flex repeaters I ended remaking a lot of my interfaces to use that with a mix of padding. I don't remember where I picked up using blank labels as spacers but I still use it in rare occasions. Setting paddingLeft to 180px seems wrong to me, if its something small like 5px or 10px then I have no problem.

Edit: This got me looking a bit as to where I picked it up. Looks like whatever templates we had use the 'blank label as spacer' method. See the tree of the view from the supposed skeleton project:

Bad Practice

Untitled2
Untitled21223×465 30.9 KB

10

Yeah when I first started Perspective and had no prior web dev experience, I relied on the examples like that which developed poor habits until I learned better (including using the spacer method). These examples should really be fixed as they start new folk off in the wrong direction. Similarly, the Vision navigation template, apart from looking like it's from the 90's :stuck_out_tongue:, has a component on it that calls system.alarm.queryStatus which is extremely bad for client performance, especially if you see this and add more e.g. for summarising alarms from more than 1 area. (I did this very early on and it broke the panel PC running it, despite being spec'd pretty high)

2 Likes
11

Where’s the Gap option?

12

You have to add it into you styling for the component. Either directly on the component, in a Style Class, or in a Style Sheet / Theme file.

Just because it isn't there by default doesn't mean it isn't supported.

In my experience with very rare exceptions (can't even think of one atm) if your browser supports it, it will work.

1 Like