I am trying to create a scrollable dialog box with text and buttons. If the content of the dialog is taller than the scroll viewport, I want the content to all be aligned at the top of the viewport. If all of the content is able to fit within the viewport without scrolling, I want it to be aligned in the center of the viewport.
Img1 : example of how the content should be aligned vertically in the center if the content can fit within the scroll viewport.
Img2: example of how the content should be aligned vertically at the top if the content is too large to all fit within the scroll viewport.
This is the structure of my canvas
Canvas
|
|---Scroll View (contains Scroll Rect component)
|
|---Viewport
| |
| |---Content (contains Vertical Layout Group, Content Size Fitter)
| |
| |---Text (contains Horizontal Layout Group component)
| |
| |---Button (contains Horizontal Layout Group component)
| | |
| | |---Text
| |
| |---Text (contains Horizontal Layout Group component)
|
|---Scrollbar Vertical
I am trying to handle vertical positioning by dynamically calculating the padding in the Vertical Layout Group that is attached to the Content element. When everything should be top-aligned, I set the padding to 10. When everything should be center-aligned, I determine the height of each UI element and set the padding appropriately to cause everything to appear center.
The dialog's text is set by a SetText method which is part of the script that is attached to the canvas. SetText assigns the text for each control in the dialog, and then does all the padding calculations.
The problem is that Unity doesn't seem to calculate each control's dimensions immediately after I assign text. For example, if I set a breakpoint in my code after I assign text to one of the Text controls for the first time, all of the size-related properties are still 0. Then when I assign a new text value, the size-related properties have their values from the first text value that I assigned.
What's the best way to solve this?
I figured out a solution. I changed the pivot's y-value in the Content element from 1 to 0.5. Now Unity centers when necessary and top-aligns when necessary without me having to figure out how to get that code to work.
Related
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):
I am trying to position the horizontally scrollbar on a bottom position when some field of the table is changed.I tried with : Scrolling Ag Grid using ensureIndexVisible()
But as least I know it is only for vertical scrollbars
There is also a method ensureColumnVisible(colId), from docs (in the same section you are refering to):
Ensures the column is visible, scrolling the table if needed.
I am about 4 hours into debugging this, time to ask!
I have this nest of objects:
- Game Object
|--- Canvas
| |---Panel
| | |---Element 1
| | |---Element 2
With my current configuration, Elements 1 and 2 are showing up separate with one completely off screen, rather than evenly spaced out next to one another within the specified space. It is a Horizontal Layout Group specified to:
Child Alignment: Middle Center
Child Controls Size & Force Expand: None.
The Canvas is set to Screen Space - Camera, with my only camera specified.
Those settings are here as well:
The Panel is a Rect Transform set to around the bottom of the screen.
Those settings - The panel has the Horizontal Layout Group component on it.
Next are the child objects, those settings are here:
In terms of what I have done, here are just a few:
Tried to remove the Canvas components from the children
Unpacked the prefabs completely to make further edits.
Rebuild the children
Tried Render mode of the Canvas to World Space
Tinkered with the anchor points to see if positioning was an issue
Hierarchy is here for clarity:
This ultimately leads to this result, the graphic on the right should be in view (on the yellow screen).
Thank you in advance!
EDIT: With Horizontal Layout Group and the rest of the object it is on:
I have a live code illustration of the issue here, as you can see, there is no space between the h1 and the Grid bellow (i was expecting 12px as i asked for a 24px spacing). If you open the console, you can see that a negative margin put the Grid above the h1, that's what i need to fix.
Am i doing something wrong here? What is the right way to patch it if i want the 24px spacing to be applied correctly with the h1?
I hope we don't have to encapsulate the h1 in a Grid container > Grid item itself.
The spacing attribute sets the spacing between the Grid items inside the Grid container, but not between the item and contaianer sides. So, you end up with:
--------------------------
|---------- ----------|
|| item |<-->| item ||
|---------- ----------|
| ^ ^ |
| | | |
| v v |
|---------- ----------|
|| item |<-->| item ||
|---------- ----------|
--------------------------
But the items are not offset from the sides of the container (depending on the justify and alignItems|Content values of course). This is accomplished by adding padding to the items and a negative margin to the container and adjusting the container width.
The easiest thing to do would be to add a marginBottom to the title style as shown here.
Because of the negative margin and width manipulation, nesting Grid containers can be tricky, though there are some recommendations for how to deal with it. For fine-control, I often set spacing={0} and use the MUI spacing API to implement the spacing between the items when nesting Grids.
I've got a panel which sits above my canvas and slides out upon clicking a button. I want to populate this panel with several objects (the number will be determined at runtime). Since the number of objects can exceed the number that would reasonably fit on a single row of the panel, I'd like to be able to scroll down with the mouse to new rows where the remaining objects have been populated.
To achieve this I've put a Scroll Rect and a Mask on the panel, created a child Image with a Vertical Layout Group to hold a series of child panels representing the rows that would hold the objects, and set the Image as the Content of the Scroll Rect.
The issue is that when I try to make one of the row panels a child of the Image object by dragging it to the Image in the Hierarchy, the anchors for the panel coalesce to a single point (the top left of the Image since it is set to Upper Left alignment) and when I try to manually drag the anchors to the appropriate position a box with a red X in it appears and expands in a manner that doesn't seem to correspond to the direction of the mouse.
Is this the right approach, and if so, how can I get this to work?
Thanks!