How to float right?

Unity Engine
,
1

As the title say how to a move my buttons to the right?
in normal css you float:right; but i cant get that to work.

7003574--827927--upload_2021-4-3_19-51-14.png

        private void AddStringEvent()
        {
            Box boxContainer = new Box();
            boxContainer.AddToClassList("EventBox");

            TextField textField = new TextField();
            textField.AddToClassList("EventText");
            boxContainer.Add(textField);

            FloatField floatField = new FloatField();
            floatField.AddToClassList("EventID");
            boxContainer.Add(floatField);

            Button btn = new Button(() => DeleteBox(boxContainer))
            {
                text = "X",
            };
            btn.AddToClassList("Eventbtn");
            boxContainer.Add(btn);           

            mainContainer.Add(boxContainer);
            RefreshExpandedState();
        }

.EventBox{
    flex-direction: row;
    width:100%;
}

.EventID{
    min-width:40px;
}

.EventText{
    min-width:150px;
}

.Eventbtn{
    float:right;
}

7003574--827930--upload_2021-4-3_19-53-26.png
7003574--827930--upload_2021-4-3_19-53-26.png883×821 77.4 KB

7003574--827933--upload_2021-4-3_19-53-42.png
7003574--827933--upload_2021-4-3_19-53-42.png510×593 16.3 KB

2

Hey,

UIToolkit uses Flexbox not pure CSS and you can find the supported properties here:

In Flexbox you can set margin-left to auto on the items that should be aligned right:

margin-left: auto;
1 Like
3

you also have align-self which can be used on individual elements (this rule is not visible inside UIBuilder)

if using absolute positioning, you can also set all of your margins to auto, while setting margin-right to 0.

But looking at your layout - I imagine it would be easier to just apply **flex-grow: 1** to the first element instead, and it should push any element following it to the right - no special rules needed for the rest of the items in the same row.

4

So I just needed to do this myself and found out that align-self doesn’t seem to work in this case, because if you set a container to behave as a row, the align property will be responsible for the vertical not horizontal alignment.

For the horizontal alignment you’d probably have to use justify-self but this doesn’t seem to be supported.

See example where I set root to ‘flex-direction: row’ and the box with number 2 to ‘align-self: flex-end’: Example align-self

5

Thanks alot! Dipity that work.

6

Wow, gold! this worked!