I want to create a scrolling frame that contains two different grid layouts. Inside the scrolling frame, there should be two frames: one at the top and another separating the two grid layouts. The scrolling frame should also be able to expand as more UI elements are added to the grid layout. An example of this can be seen in the Murder Mystery 2 inventory (picture below).
Is it possible to achieve this without using scripts? If so, how can it be done?
Hi Dev, This does not need scripts, even because roblox itself provides you with the resources
Here is an RBX template just insert it inside a StarterGui
Events.rbxm (10,7,KB)
You can use AutomaticSize to synchronize with frames inside a ScrollingFrame, and then inside the Frame, you can insert another ScrollingFrame and a TextLabel with the desired title, and inside the Scrolling make it have an AutomaticSize = Y, and then insert a UIGridLayout or UILayout
The solution provided suggests using multiple scrolling frames within the main scrolling frame. However, my goal is to have everything contained within a single scrolling frame that scales according to each UIGridLayout so this is not what I’m looking for.
What nikilis does to resize the frame is ensure that if the object reaches the maximum number of items in a frame, it resizes the frame to a size 1,0,0,0, which AutomaticSize/Y already does, but in general it already does that in that file I sent (you don’t need scripts to do that)
Alright, here is how it is done. Ignore the terrible UI color choice, I am a terrible UI designer
So, as always, you need a screen gui. First things first, insert a normal frame, and size it to whatever you would like (And color it darker so it doesn’t hurt the eyes!!!). This frame is going to be the main background and what holds everything else. Inside of the frame, add a scrolling frame and set its size to 1, 0, 1, 0 so that it is covering the entire frame. Set the background transparency to 1. Next you are going to need to change the canvas size of the scrolling frame to all 0s.
Inside of the scrolling frame, add a UIListLayout. The default properties are perfect. Next add a new frame with size of 1,0,0,0. Then the magic happens. Set the AutomaticSize property to Y. Now whenever a new child is added to the frame, the frame will resize itself to fit the new child.
Inside of that frame, add another UIListLayout, default properties are fine again. There are going to be 2 frames inside of that frame also. One for the title and one for the items. The title one is going to need a LayoutOrder of 0, and the items 1. For the title one, the size is going to be something around 1,0,0,50. Then just add a Text frame with size of 1,0,1,0 and write the title. (If you want the divider bar, add another frame with size of around 0.75,0,0,3 and color it correctly.)
In the items frame the size also needs to be 1,0,0,0 and the AutomaticSize set to Y. Then add a UIGridLayout and make your item frames. Here is a little demo that I made:
GuiThing.rbxm (12.9 KB)
You are a wizard, everybody I talked to said it can only be done through scripting.
Wait what… wow man seems like the people you talked to just joined roblox a few days ago.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.