Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Equivalent of css `fit-content`?

Discussion in 'UI Toolkit' started by RobertAcksel, Sep 29, 2021.

  1. RobertAcksel

    RobertAcksel

    Joined:
    Sep 20, 2018
    Posts:
    6
    What is the uss equivalent of css `width: fit-content;`?
     
  2. HugoBD-Unity

    HugoBD-Unity

    Unity Technologies

    Joined:
    May 14, 2018
    Posts:
    490
    Hi @RobertAcksel,

    It is not something USS currently supports. What are you trying to achieve ? I'm confident we can get the same result using the current available USS properties.

    Such as:
    - flex-grow
    - min-width
    - max-width
     
  3. RobertAcksel

    RobertAcksel

    Joined:
    Sep 20, 2018
    Posts:
    6
    i have 2 elements where the second is a child of the first and is an label showing text.

    Like:
    ->Visual Element
    |->Label (with text)

    where:
    - flex-grow = 0
    - min-width = auto
    - max-width = none

    now i want the first element to grow corresponding to the size of the second element which should be following the minimal size required by the text.
    however the elements have always the size of the whole screen.
    i could use the max-width property but this is not actually how it should be in that case meaning i do not want an upper limit but still want the element to auto shrink to content size defined by its text.
     
  4. HugoBD-Unity

    HugoBD-Unity

    Unity Technologies

    Joined:
    May 14, 2018
    Posts:
    490
    I just tried it on my side, and setting the Flex-Direction of the first element to "row" seems to achieve what you are looking for.

    Let me know if it helped.
     
  5. RobertAcksel

    RobertAcksel

    Joined:
    Sep 20, 2018
    Posts:
    6
    Yes that kinda does the trick.
    Seems that the first element can actually never shrink and you would need to set an exact size if you dont want it to fill horizontally.
    First element here means the top element in the source asset referenced in the ui document component for example.

    This first element shrink/grows to the size in pannel seetings referenced in the ui document.
    But now you would probably need to make the elements you want to auto size to be childs of an element with Flex-Direction set to "row". You could then make that element invisible and none interactable. Its ok if you know this.
    But i think the first element should be able to shrink to the minimum needed size too.
    On the other hand i belive it works like it does in html too.