I am trying to maintain the aspect ratio of child elements within a Horizontal Layout Group when the total width of children would exceed the Layout Group's width.
Given the Horizontal Layout Group below, the child squares' total width fits within the parent so they do not need to scale:
If we add more children and their total width exceeds the Layout Group's width, but by default they do not scale accordingly:
The desired outcome would be that they scale proportionally to fit the Layout Group's width:
I have tried various configurations of settings on the Layout Group's properties and just cannot produce the desired outcome.
The closest I can get the below by checking Control Child Size: Width and setting a Layout Element component on the child and setting the preferred width and height.
Control Child Size: Whether the Layout Group controls the width and height of its child layout elements.
Use Child Scale: Whether the Layout Group considers the scale of its child layout elements when sizing and laying out elements. Width and Height correspond to the Scale > X and Scale > Y values in each child layout element’s Rect Transform component.
Child Force Expand: Whether to force the child layout elements to expand to fill additional available space.
My brain is just not getting to the correct config.
Hopefully, I am overlooking something simple.
It's possible:
Create a Horizontal Layer Group
Tick Control Child Size : Width
Tick Child Force Expand : Width & Height
Add an empty GameObject inside this Horizontal Layer Group
Add another empty GameObject inside the GameObject you made in step 4
Add an Aspect Ratio Fitter component to the GameObject you made in step 5
Set Aspect Mode : Fit In Parent
Alternative Solution that worked in my case:
Create a Horizontal Layer Group
Tick Control Child Size : Width
Tick Child Force Expand : Width & Height
Each child that you add inside the layout group must have an Aspect ratio fitter with:
Aspect mode: Width Controls height
Aspect Ratio: 1
Related
Hello, any advice how to make 'obj#2' move down or adjust when for example obj#1 has a childs?
for the mean time some child or the 1st child of Object#1 is overlapping with Obj#2.
goal is:
obj#1
child0
child1
child2
obj#2 <-----
my hierarchy setup is:
scroll_view <---scrollrect,mask
content <---vertical layout group, content size fitter
[[obj#1]]
sub_content<--- vertical layout group, content size fitter
[[obj#1 child0]]
[[obj#1 child1]]
[[obj#2]]
so on...
I've played around with the settings/options and searched for a video tutorial but most of the one I get are single elements list in scroll view only.
Thank you for reading. Regards.
You can use Content Size Fitter on obj#1 with Vertical fitting, but you should add Layout Element to you child’s(child0, child1, child2) and setup preferred height. But you setup must be identical, if you setup Min Height in Layout Element, use Vertical Fit - Minimum, or Preferred, when use Preferred Width
EDIT: oh, I see you use Content Size Fitter, but if you haven’t Layout Element component on childs, Content Size Fitter can works unpredictably. And, try to add Vertical Layout group on Scroll View, this may help to control vertical position of the elements according to the size
I feel like I am not understanding the Vertical Layout Group component in Unity 2020.3.21 and I am hoping that someone can explain what I am missing.
I have a series of runtime-controlled UI components that I want displayed vertically top-to-bottom. I need to be able to toggle these components on and off at run-time, and have the parent Vertical Layout Group size automatically update to the height of all of the active children. This is exactly the sort of thing the Vertical Layout Group is supposed to handle, right?
When I build out a simple example, I am seeing that the Vertical Layout Group correctly positions the children in a vertical list. However, it competely ignores the sizes of the children when measuring it's own height. This is a problem because I want to be able to throw this container in a Scroll View -- if the height is not accurate, then the Scroll View doesn't work properly.
Here's my demo. I have a series of children in a VLG that all have explicit set heights in their RectTransform. All of them are direct children of the VLG. None of them use a LayoutElement; all heights are explicitly defined in a RectTransform. Here's the scene hierarchy, with the compile-time RectTransform heights of each component in parenthesis.
Canvas (325x812)
GameObject (812)
Vertical Layout Group (100)
Text (45)
Spacer (100)
Text Input (48)
Spacer (20)
Button (48)
Here are my VLG settings:
When I run the game, I can see the outline of each UI object in the Scene tab. The children clearly have their heights set. Yet the VLG still has it's static compile-time height of 100 instead of the sum of the child heights.
Am I missing something about how the Vertical Layout Group works? How can I get this VLG to have it's Height property set to the actual total height of it's active children at runtime?
ContentSizeFitter with Vertical Fit set to preferred size should do the trick. I did a quick test using simplified structure based on your example and got height calculated correctly (height of children objects is 100+50+75):
When we use Layout Groups components in Unity editor . it divide our Layouts in same sections.
But i want have different size for my UI's in vertical or horizontal Groups .
In this image i have 3 UI (red , white and green color) . as you see they have same height size .
Red section that its name is header must have smaller height and also footer
It must like following image :
If this is something you want:
Setup vertical layout group like this:
You can see there are 3 child objects of VerticalLayoutGroup object in hierarchy. Header, Content and Footer. Now on Content object, add LayoutElement component and set Preferred Height as desired:
Note: you don't need to add LayoutElement on other children if you don't want to give them extra space. They will use rest of space equally.
From Docs:
First minimum sizes are allocated.
If there is sufficient available space, preferred sizes are allocated.
If there is additional available space, flexible size is allocated.
I want to create a chat box. Messages should have a border. Also message could be located in one of two sides, I mean right or left side.
I have made two prefabs, one for left-side message and second one for right-side message.
When I add some prefab in chat box it works fine, I can see the border. But when I do it by the script, then the border is invisible.
Here is the structure.
The "Content" has Vertical Layout Group component with checked Width, and Content Size Fitter with Horizontal Fit - Unconstrained and Vertical Fit - Preferred Size.
The "Message left" has Horizontal Layout Group with unchecked Width and Height, and Layout Element with all unchecked.
The "Message (1)" has Content Size Fitter with Horizontal Fit - Unconstrained and Vertical Fit - Preferred Size, Horizontal Layout Group with Width checked, and Layout Element with Preferred Width - 291.5, and Flexible Width - 0.
Also here is two imaged, with border and without border.
UPDATE: The border is on "Message (1)" and it looks like
So how do I fix it? Is there a solution?
UPDATE2: I have fixed it. The problem was in Z scaling of sprite, I set it to 0, but it has to be 1.
The problem was in Z scaling of sprite, I set it to 0, but it has to be 1.
From what I understand the DataGrid auto resizes the columns.
What I would like is DataGrid to respect the column widths I set, and to show the horizontal scrollers accordingly. Is there a way to achieve this?
DataGrid gives you complete control over the width of its columns.
For example, if you set the width of all columns in pixels except for one column which has a width equal to 100%, then all columns will have exactly the width you specified, except for the percentage column which will shrink or expand based on the width of a DataGrid itself. If you want all columns to have fixed width, then you should set the width of the entire DataGrid explicitly in pixels.
There is also an important .setMinimumTableWidth method. You can use it to tell the DataGrid that it can resize with the width of its parent container, but never be smaller than a certain number of pixels. In this case, if a parent container is too small to accommodate all columns at their desired width, the horizontal scrollbar will appear.