Style - size problem

Unity Engine
,
1

I have image A and text field B(no label) in a container C.
Let E be container C width - image A width
Container C is in container D.
Container C has some start height.
Container C is filling container D in width(so container D is controlling width).
Image A has const width.
I want text field B:

  • Start near image A.
  • If text width is less than E width:
    – Have minimal width(text field background with not filling out container C, just enough for text)
    – Have stretched height(same height as container C)
  • If text width is more than E width:
    – Do not extend container C in width, create another line
    – Possibly extend container C in height

I don’t know how to do this. I can only do:

  1. Correct height, bad align(starts near right border of container C) and expands container C width when text is more than E width
  2. Correct height, correct align, doesn’t expand container C width, but stretched in width and also doesn’t expand container C height.

Current styles:

styleAccess = containerC.style;
styleAccess.flexDirection = FlexDirection.Row;
styleAccess.minHeight = 40f;
styleAccess.alignItems = Align.Center;

Bad style 1:

styleAccess = textFieldB.style;
styleAccess.minHeight = 40f;

styleAccess.whiteSpace = WhiteSpace.Normal;
styleAccess.alignSelf = Align.Stretch;
styleAccess.flexWrap = Wrap.Wrap;

Bad style 2:

styleAccess = textFieldB.style;
styleAccess.minHeight = 40f;

styleAccess.position = Position.Absolute;
styleAccess.left = 20f;
styleAccess.right = 0f;

styleAccess.whiteSpace = WhiteSpace.Normal;
styleAccess.alignSelf = Align.Stretch;
styleAccess.flexWrap = Wrap.Wrap;

Anybody?

2

Hi, I read this post 3 or 4 times and still have issue visualizing the full pictures on Friday at 6pm.

For now, I will just suggest a few parameters that could help you achieve this :

  • flex-direction: row-reverse
  • flex-wrap: wrap-reverse
  • justify-content: flex-start | flex-end | center | space-between | space-around

You are already using alignSelf, alignItems: they are essential tool for what you are doing.

I would also search on regular htlm/css solutions for this, they should be equivalent.

The last option would be to use the geometry changed event to reorganize the layout.

Unfortunately, we do not support the media queries that could help with these kinds of situation.

1 Like
3

Yes, set what you can in the style sheet or inline, then use geometry event to fix the rest, but use resolvedStyle rather than style to get the right values.

4

Thanks for suggestions, I needed justify-content and rest I figured out with GeometryChangedEvent.
Last obstacle I stumbled upon: I wanted to move the changes from code to uss file.
But for some reason values are ignored :frowning:

.ContainerC
{
    min-height: 40px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; <-- this is for sure ignored i.e. :(
}

.TextFieldB
{
    min-height: 40px; <-- this as well
    white-space: normal;
    align-self: stretch;
    flex-wrap: wrap;
}
5

The style will be overridden if there is a more specific selector, or if an inline style is set somewhere (can be in c#, on directly on the UXML of the element).
You can use the UI debugger (window->UI Toolkit->Debugger) to see what is the resulting style applied to the element and the source (inherited, the applicable stylesheet, etc)

Don’t hesitate to share back any question you may have.