Search Unity

  1. Unity 2017.2 beta is now available for download.
    Dismiss Notice
  2. Unity 2017.1 is now released.
    Dismiss Notice
  3. Introducing the Unity Essentials Packs! Find out more.
    Dismiss Notice
  4. Check out all the fixes for 5.6 on the patch releases page.
    Dismiss Notice
  5. Help us improve the editor usability and artist workflows. Join our discussion to provide your feedback.
    Dismiss Notice

Limit Max Width of Layout Component?

Discussion in 'Unity UI & TextMesh Pro' started by Stephan-B, Apr 5, 2015.

  1. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Is there a way to set a Maximum width on a layout component? This would be useful to control how wide a given element can be to force word wrapping on text for instance.

    Example: Imagine a button with a child text component. The button width would increase with the length of the text up to this maximum value at which point the width would be fixed forcing the text to wrap to the next line now increasing the height of the button.

    In the same line, it would be nice to also be able to set a maximum value on the height.

    The Layout Element Component would seem to be the ideal candidate for this feature where in addition to min values, max values could be defined.
     
  2. crushhh

    crushhh

    Joined:
    Mar 22, 2015
    Posts:
    12
    I have to admit that I was a bit baffled that a max value didn't exist on the Layout Element component. It seems that Preferred seems to sort of work that way, but then - not really.
     
  3. SimonDarksideJ

    SimonDarksideJ

    Joined:
    Jul 3, 2012
    Posts:
    1,552
    Nope @Stephan B There are no MAX values as you rightly point out.
    You'd have to create your own custom version for that.

    I'd also log it as a bug using the unity bug reporter in the editor as it does seem a very obvious gap.
     
    geff likes this.
  4. runevision

    runevision

    Unity Technologies

    Joined:
    Nov 28, 2007
    Posts:
    1,193
    The preferred width/height property works as a max property if you have flexible width/height set to 0.

    If your element is inside a Horizontal Layout Group or Vertical Layout Group, make sure to disable "Child Force Expand" there as well.
     
    congressman likes this.
  5. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    I still can't achieve the result that I seek using what you described. When using preferred width / height it does limit (max) the property but it also forces this as a minimum.

    For example assume you have a container for text that you wish to have a min height of 50 (assume 1 line of text) and max height of 150 (3 lines of text). So when the text is 1 line, the container is of height 50. When the text is 2 lines, the container is 100 and then when the text is 3 lines it is 150. When the text is 4 lines, the 4th line is truncated since the max height is 150. When using preferred height as you describe, the text container is always the preferred height and doesn't shrink in height based on the number of lines of text supplied.

    The parent of this text container has a ContentSizeFitter to make sure the height changes based on the lines of text. When using preferred height, the ContentSizeFitter simply uses that instead of the number of lines of text.
     
  6. Darkcoder

    Darkcoder

    Joined:
    Apr 13, 2011
    Posts:
    1,053
    Just came across this issue myself, most annoying!
     
  7. runevision

    runevision

    Unity Technologies

    Joined:
    Nov 28, 2007
    Posts:
    1,193
    Hi, I'm just back from vacation, hence the late reply.

    After pondering the described use case for a bit, I don't think the layout system handles it well. I think OnGUI / IMGUI which it was inspired by also doesn't handle it well. (IMGUI has a MaxWidth property, but it's implemented very similar to the PreferredWidth in the new UI system - i.e if you specify a MaxWidth and there is sufficient space, it *will* be used.)

    To have support for a max-width that works in the way described in your post above, the layout calculations would have to be quite significantly different (and more sophisticated). I'll add it to our list of usability concerns.

    At this point it's not clear how many people are having major problems due to this. The UI Team is spread quite thin at the moment (I'm technically not on it myself anymore either), and while we're looking to expand it, this feature request is likely not going to be the first thing worked on. As usual, it can help us get a better overview of demand if you create an item for it on our feedback site and vote on it there.

    For anyone who might want to look into modifying the UI source code to add support for this, the relevant places to look are ILayoutElement.cs, LayoutUtility.cs, LayoutElement.cs, and HorizontalOrVerticalLayoutGroup.cs.
     
  8. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Thank you for the reply and hope you had a great vacation.

    I'll look into the source code although modifying it for personal / project use is fine but in the context of releasing an Asset through the Unity Asset Store trickier to handle.
     
  9. BCook99

    BCook99

    Joined:
    Feb 17, 2015
    Posts:
    3
    I am running into this same issue, it is a real hindrance to the layout system when you are working with text controls that contain a lot of text. Really need max values support on LayoutElement.
     
  10. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    I have a lot of users still asking for this.
     
  11. kweinhold

    kweinhold

    Joined:
    Oct 18, 2015
    Posts:
    3
    I found a way that works for me. See if you can adapt it to your needs.

    I was working on a tool tip, so I have an image with text inside it. The tool tip should resize the width to fit the text, but have a max width, after which it will wrap and expand horizontally. To make it work, I added an empty object with a layout element with a preferred sized (the max width). I've attached an image to explain it in detail.

    1. empty object
    - Rect Transform
    - Layout Element: preferred width = 120
    - Content Size Fitter: Vertical Fit = Preferred Size
    - Vertical Layout Group: Child Force Expand = none checked

    2. Image
    - Rect Transform
    - Image
    - Vertical Layout Group: Child Force Expand = Height checked

    3. Text

    [​IMG]
     
    Zenov likes this.
  12. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Using a similar setup with an Empty object as the top parent, I was able to get the desired result without the need to add a Layout Element on the top parent. Instead, the width of the RectTransform of this top parent serves as the width limit.

    As you can see in the video, the image (button in this case) will expand up to the width of the parent and the text will wrap as expected. Note that I am using TextMesh Pro here but the behavior is the same when using UI.Text.

    [​IMG]
    Click to view at full size.
     
    Last edited: Mar 25, 2016
    Elendow, -chris and hilllo like this.
  13. asperatology

    asperatology

    Joined:
    Mar 10, 2015
    Posts:
    864
    Video? What video?
     
  14. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    I meant animated GIF.
     
  15. asperatology

    asperatology

    Joined:
    Mar 10, 2015
    Posts:
    864
    I still don't see the GIF.
    [​IMG]
     
  16. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    [​IMG]
     
    Last edited: May 27, 2016
  17. hilllo

    hilllo

    Joined:
    May 27, 2016
    Posts:
    2

    It works INDEED! How do u come up with this idea?
     
  18. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    Credit for the idea goes to one of my TextMesh Pro users and @kweinhold who had very similar setups. I just figured out that it could be done without the extra layout element.
     
  19. ppnn13y

    ppnn13y

    Joined:
    Jan 21, 2017
    Posts:
    1
    It's not work. Could you upload the project, please!
     
  20. Mukul_Negi

    Mukul_Negi

    Joined:
    Mar 27, 2016
    Posts:
    18
    NOT working for me either.
     
  21. bkachmar

    bkachmar

    Joined:
    Mar 15, 2013
    Posts:
    26
    Thanks bro, this made my day =)
     
  22. smitchell

    smitchell

    Joined:
    Mar 12, 2012
    Posts:
    702
    yeah, I can't manage to get this working either :( anyone got a update on this?
     
  23. se210

    se210

    Joined:
    Jan 19, 2016
    Posts:
    1
    In the newer versions of Unity, it seems that you must check "Child Control Size" for both width and height in all the vertical/horizontal layout groups for this to work properly.
     
    awmcclain and larku like this.