Question How to centre align items from code

I'm making a custom element and I'm having some trouble getting items to centre align. I've got these two items and I want them vertically aligned. These two are in a visual element with flow direction set to row. As I understand it that means the column is the cross axis and align-items centre should do the trick.



Below is the code I'm using. Anyone got any idea how to get this to work?

Code (CSharp):

1.  
2.                 VisualElement horizontalPart = new VisualElement();
3.                 horizontalPart.style.flexDirection = FlexDirection.Row;
4.                 horizontalPart.style.alignItems = Align.Center;
5.  
6.                 Toggle accessoryActive = new Toggle();
7.                 accessoryActive.text = "Accessory Active";
8.                 accessoryActive.style.alignSelf = Align.FlexStart;
9.                 horizontalPart.Add(accessoryActive);
10.  
11.                 Button addTextureSwap = new Button()
12.                 {
13.                     text = "Add Texture Swap",
14.                     name = "TextureSwapBtn"
15.                 };
16.                 addTextureSwap.style.marginTop = 10f;
17.                 addTextureSwap.style.alignSelf = Align.FlexEnd;
18.                 horizontalPart.Add(addTextureSwap);

 

I think you are understanding it right. My guess is that it doesn't work because you are then overriding it with alignSelf in the child elements. Why are you setting accessoryActive's

alignSelf

to

FlexStart

and addTextureSwap's

alignSelf

to

FlexEnd

?

 

Because I want one to be on the left side of the screen and on one on the right hand side. I guess I should use something else to accomplish that then.

 

alignSelf doesn't do that in your code. It overrides the parent's alignItems value. That means it's positioning your elements in the cross axis too. That's why accessoryActive is on the top, and addTextureSwap is on the bottom of horizontalPart.

The first element should already be on the left, and the second element should appear right after the first one in row order without any more code. I hope this helps. Do you want help for arranging these elements horizontally? If so, I'd need to know more about how do you want them to look.

 

I want one element on the left and one on the right with an empty space between them. So the "Add Texture Swap" button aligns with the end of the Objectfield. I had managed that before using FlexStart and FlexEnd.

 

You could set horizontalPart's justifyContent to spaceBetween. Or you could set accesoryActive's flexGrow to 1, so that it occupies all the remaining available space, pushing the button to the right.

Remember to remove the alignSelf lines from your code to avoid overriding the parent's alignItems property. Also, you have a margin of 10 on the button that is not present on the Toggle; for proper vertical alignment, I'd suggest removing it and maybe replacing it with a paddingTop or a marginTop in horizontalPart.

Does this help?

EDIT
I'd recommend either tagging me or quoting me on your responses. Otherwise, I don't get an alert on the forum and I could miss your replies.

EDIT 2
On why it worked before with FlexStart and FlexEnd, I'm not sure. It shouldn't, as it handles the same axis as the parent's alignItems property. Maybe the parent was previously using a Column flex-direction?

 

JustifyContent set to SpaceBetween did the trick! Thanks.