Make list multiline without using UiListLayout

Help and Feedback Scripting Support
#1

I’d like to make this adapt to a multi-line script without a UIListLayout.

I’ve tried adjusting things here, but can’t seem to get it.

if #Table >= 1 then
				for a,b in pairs(Table) do
					if stopLoops[self] then stopLoops[self] = nil break end

					local dataText = Template:clone()
					if Title == "Commands" and tableTest(Table) == "Table" then
						dataText.Text = b[2]..b[5][1]
						dataText.Name = b[5][1]
					elseif Title == "Donor Data" and tableTest(Table) == "Table" then
						dataText.Text = b[1]
						dataText.Name = b[1]
					else
						dataText.Text = b
						dataText.Name = b
					end
					if tempDown == 0 then
						dataText.Position = UDim2.new(0,10,0,20*tempDown+0*tempDown)
						tempDown = 1
					else
						dataText.Position = UDim2.new(0,10,0,20*tempDown+0*tempDown)
						tempDown = tempDown+1
					end

DataText.Position refers to the position of the label in the list, basic admin essentials, it sometimes overlaps while multiline without a uilistlayout, but the uilistlayout makes the position weird

#2

You’ll need a couple things to do this,

Size = The size.Y.Offset(or scale if you’re using scale) of UIObject
Padding = The padding of the Y axis between each UIObject
Alpha = You’ll then need to add Size and Padding
Position = Alpha * #Table

For the things you need make sure its a number then the Y Offset should be Position.

If you want me to try do the coding myself then I can try.

#3

could you give an example please?

#4

also just a heads up; this didn’t work. since this is running in an a,b in next loop, im unsure how to determine the last object so its just gonna reposition based off the current size

#5

Can you include the full script please?

#6

sure, theres a vid of the bug and here’s the full script

elseif Type == "List" then
		createLabel()

		local Title,canRefresh,canSearch,dataTable = Data[1],Data[2],Data[3],Data[4]

		local List = baseClip:WaitForChild('List Template')

		local listClone = List:Clone()
		listClone.Name = "List Clone"
		local scrollingFrame = listClone:WaitForChild('ScrollingFrame')
		local Template = scrollingFrame:WaitForChild('Template')
		Template.Visible = false
		local Controls = listClone:WaitForChild('Controls')
		local Tools = 0
		local exitButton = Controls:WaitForChild('Exit')
		local searchButton = Controls:WaitForChild('Search')
		local refreshButton = Controls:WaitForChild('Refresh')

		local Decoration = Controls:WaitForChild('Decoration')
		local searchBar = Decoration:WaitForChild('Search')
		local searchBox = searchBar:WaitForChild('TextBox')
		local listTitle = Decoration:WaitForChild('Title')
		
		listTitle.Text = Title
		if listTitle.Text == "Current Players In Game" then
			listTitle.Text = "Current Players In Game".." ("..#game.Players:GetPlayers()..")"
		elseif string.find(listTitle.Text, 'Backpack') or string.find(listTitle.Text, 'Tools') then
			for a,b in next, game.Players:GetPlayers() do
				local User = string.sub(listTitle.Text, 1, #b.Name)
				if User == b.Name then
					
					Tools = #b.Backpack:GetChildren()
					if b.Character and b.Character ~= nil then
						for c,d in next, b.Character:GetChildren() do
							if d:IsA('Tool') or d:IsA('HopperBin') then
								if Tools == nil then
									Tools = 0
								end
								Tools = Tools + 1
							end
						end
					end
					listTitle.Text = Title.." ("..Tools..")"
				end
			end
		end
		if canSearch and not canRefresh then
			refreshButton.Visible = false
			Decoration.Size = UDim2.new(1.277, -90,0, 30)
		elseif not canSearch and canRefresh then
			searchButton.Visible = false
			refreshButton.Position = UDim2.new(1.277, -90,0, 30)
			Decoration.Size = UDim2.new(1.277, -90,0, 30)
		elseif not canSearch and not canRefresh then
			Decoration.Size = UDim2.new(1.277, -90,0, 30)
			searchButton.Visible = false
			refreshButton.Visible = false
		end

		listClone.Position = UDim2.new(0,-listClone.Size.X.Offset-5,0.5,-150)
		listClone.Parent = baseClip
		listClone.Visible = true

		exitButton.MouseButton1Click:connect(function()
			spawn(function()
				for a,b in pairs(scrollingFrame:GetChildren()) do
					TweenTextTransparency(b,0,1,0.5*0.65)
					wait()
				end
			end)
			for a,b in pairs(Stacks.Frames) do
				if b == listClone then
					table.remove(Stacks.Frames,a)
				end
			end
			figureFrames(Stacks.Frames)
			listClone:TweenPosition(UDim2.new(listClone.Position.X.Scale,listClone.Position.X.Offset,1,5),"Out","Quint",0.3,true)
			repeat wait() until listClone.Position == UDim2.new(listClone.Position.X.Scale,listClone.Position.X.Offset,1,5)
			listClone:Destroy()
		end)

		local function tableTest(Table)
			for a,b in next,Table do
				if type(b) == "table" then
					return "Table"
				elseif type(b) == "string" or type(b) == "number" or type(b) == "boolean" then
					return "Other"
				end
			end
		end

		--		local function Reverse(Table)
		--			local Len = #Table
		--			local newTab = {}
		--			for i,v in pairs(Table) do
		--				newTab[Len] = v
		--				Len = Len - 1
		--			end
		--			return newTab
		--		end

		local function queryTable(Table,Data)
			local tempTable = {}
			ypcall(function()
				for _,v in pairs(Table) do
					if string.lower(v):match(string.lower(Data)) then
						table.insert(tempTable,v)
					end
				end
			end)
			return tempTable
		end

		local Down = 0
		local stopLoops = {}
		local lastLoop = nil
		local loopManager = {}
		loopManager.__index = loopManager
		function loopManager.new() return setmetatable({}, loopManager) end

		function loopManager:Break()
			stopLoops[self] = true
		end

		function loopManager:NewLoop(Table)
			for a,b in pairs(scrollingFrame:GetChildren()) do
				if b.Name ~= 'Template' and b.Name ~= 'layout' then
					b:Destroy()
				end
			end

			local tempDown = 0
			local tempDown2 = 0
			local LastItem
			if #Table >= 1 then
				for a,b in pairs(Table) do
					if stopLoops[self] then stopLoops[self] = nil break end

					local dataText = Template:clone()
					if Title == "Commands" and tableTest(Table) == "Table" then
						dataText.Text = b[2]..b[5][1]
						dataText.Name = b[5][1]
					elseif Title == "Donor Data" and tableTest(Table) == "Table" then
						dataText.Text = b[1]
						dataText.Name = b[1]
					else
						dataText.Text = b
						dataText.Name = b
					end
					if tempDown == 0 then
						if LastItem then
							local ItemPos = LastItem.AbsoluteSize.Y
							dataText.Position = UDim2.new(0,10,0,20*tempDown+ItemPos / 5*tempDown + 5)	
						else
							dataText.Position = UDim2.new(0,10,0,20*tempDown+0*tempDown + 5)
							tempDown = 1
						end
						tempDown2 = dataText.AbsoluteSize.Y
					else
						dataText.Position = UDim2.new(0,10,0,20*tempDown+tempDown2 / 5*tempDown + 5)
						tempDown = tempDown+1
						LastItem = dataText
					end
					scrollingFrame.CanvasSize = UDim2.new(0,0,0,20*tempDown+0*tempDown)
					dataText.Parent = scrollingFrame
					dataText.TextTransparency = 1
					dataText.Visible = true
					TweenTextTransparency(dataText,1,0,0.5*0.65)
					Services.runService.RenderStepped:wait()
					if tempDown >= 1500 then
						dataText.Name = "Displaying 1500 of "..#Table..' results.'
						dataText.Text = "Displaying 1500 of "..#Table..' results.'
						break
					end
				end
			else
				scrollingFrame.CanvasSize = UDim2.new(0,0,0,20*Down+0*Down)
				local dataText = Template:clone()
				dataText.Text = 'Error, no data found!'
				dataText.Parent = scrollingFrame
				dataText.Name = 'Error, no data found!'
				dataText.Visible = true
				TweenTextTransparency(dataText,1,0,0.5*0.65)
			end		
		end

		scrollingFrame.ChildAdded:connect(function(Obj)
			if Obj:IsA('TextBox') then
				Obj.MouseEnter:connect(function()
					Obj.MouseMoved:connect(function(X,Y)
						if Title == 'Commands' then
							local Matched = false
							for a,b in pairs(dataTable) do
								if Obj.Name == b[5][1] then
									Matched = true
									mouseLabel.Text = b[2]..b[5][1]..' '..b[5][2]..'\n'..b[5][3]
								end
							end
							if not Matched then
								mouseLabel.Text = Obj.Text
							end
						elseif Title == "Donor Data" then
							local Matched = false
							for a,b in pairs(dataTable) do
								if Obj.Name == b[1] then
									Matched = true
									mouseLabel.Text = b[1]..'\n'..b[2]
								end
							end
							if not Matched then
								mouseLabel.Text = Obj.Text
							end
						else
							mouseLabel.Text = Obj.Text
						end
						local XB,YB = mouseLabel.TextBounds.X, mouseLabel.TextBounds.Y
						mouseLabel.BorderSizePixel = 1
						mouseLabel.Size = UDim2.new(0,XB+10,0,YB+10)
						local mouseOffset
						if mouseLabel.AbsoluteSize.Y <= 28 then
							mouseOffset = ((mouseLabel.AbsoluteSize.Y*2)-5)
						else
							mouseOffset = 60
						end
						if X-(mouseLabel.AbsoluteSize.X) >= 0 then
							mouseLabel.Position = UDim2.new(0, X-(mouseLabel.AbsoluteSize.X), 0, Y-(mouseLabel.AbsoluteSize.Y/2)-mouseOffset)
						elseif X-(mouseLabel.AbsoluteSize.X) <= 0 then
							mouseLabel.Position = UDim2.new(0, X, 0, Y-(mouseLabel.AbsoluteSize.Y/2)-mouseOffset)
						end
					end)
				end)

				Obj.MouseLeave:connect(function()
					mouseLabel.Text = ''
					mouseLabel.BorderSizePixel = 0
					mouseLabel.Size = UDim2.new(0,0,0,0)
				end)
			end
		end)
--local AlreadyRef = false
		searchButton.MouseButton1Click:connect(function()
			if listTitle.Visible then
				listTitle.Visible = false
								searchBar.Position = UDim2.new(0,0,-1,0)
				searchBar.Visible = true
				searchBar.Position = UDim2.new(0,0,0,0)
								--searchBar:TweenPosition(UDim2.new(0,0,0,0),'Out','Quint',0.3,true)
			else
				listTitle.Visible = true
				searchBar.Position = UDim2.new(0,0,-1,0)
								--searchBar:TweenPosition(UDim2.new(0,0,1,0),'Out','Quint',0.3,true)
				searchBar.Visible = false
				listTitle.Visible = true
			end
		end)

		local refreshDebounce = false		

		refreshButton.MouseButton1Click:connect(function()
			if not canRefresh then return end
			if not refreshDebounce then
				refreshDebounce = true
				--				local Reply = essentialsFunction:InvokeServer(clientConfig.Key,'Refresh',Title)
				local Reply = invokeServer('Refresh',Title)
				if Reply then
					if string.find(listTitle.Text, "Current Players In Game") then
						listTitle.Text = "Current Players In Game".." ("..#game.Players:GetPlayers()..")"
					elseif string.find(listTitle.Text, 'Backpack') or string.find(listTitle.Text, 'Tools') then
						Tools = 0
						for a,b in next, game.Players:GetPlayers() do
							local User = string.sub(listTitle.Text, 1, #b.Name)
							if User == b.Name then
								Tools = #b.Backpack:GetChildren()
								if b.Character and b.Character ~= nil then
									for c,d in next, b.Character:GetChildren() do
										if d:IsA('Tool') or d:IsA('HopperBin') then
											Tools = Tools + 1
										end
									end
								end
								listTitle.Text = Title.." ("..Tools..")"
							end
						end
					end
					dataTable = Reply
					if lastLoop then
						lastLoop:Break()
					end
					local newLoop = loopManager.new()
					lastLoop = newLoop
					newLoop:NewLoop(dataTable)
				end
				wait(0.15)
				refreshDebounce = false
			end
		end)

		searchBox.Changed:connect(function(Prop)
			if Prop == "Text" then
				if searchBox.Text ~= '' and searchBox.Text ~= "Search.." then
					if lastLoop then
						lastLoop:Break()
					end
					local queriedTable
					if tableTest(dataTable) == "Table" then
						local tempTable = {}
						for a,b in next,dataTable do
							table.insert(tempTable,b[1])
						end
						queriedTable = queryTable(tempTable,searchBox.Text)
					else
						queriedTable = queryTable(dataTable,searchBox.Text)
					end
					local newLoop = loopManager.new()
					lastLoop = newLoop
					newLoop:NewLoop(queriedTable)
				else
					if lastLoop then
						lastLoop:Break()
					end
					local newLoop = loopManager.new()
					lastLoop = newLoop
					newLoop:NewLoop(dataTable)
				end
			end
		end)

		spawn(function()
			local newLoop = loopManager.new()
			lastLoop = newLoop
			newLoop:NewLoop(dataTable)
		end)

		table.insert(Stacks.Frames,listClone)
		figureFrames(Stacks.Frames)

#7

I think that’s something to do with the text having 2 or more lines, try turning automatic sizing on in the text label

#8

it is, also its a textbox for easy copy and pasting users

#9

image
^In the text box click this

#10

mhm thats what i have currently

#11

its just readjusting the position as uilistlayouts make it look wonky

#12

Is TextBox.TextWrapped on true?

#13

yes its just the positioning calculations that are making it overlap or position on top of another

#14

Yeah, I had a rethink and looked at the text label and it looked fine. I tried reading your code but its too messy (to me) and I don’t really know what does what. Could you try making a more cleaner and basic version?

#15

it’s the Basic Admin Essentials code (2017ish) version, the part where it positions it is the for a,b in next table loop and “datatext” is the textbox

#16

Any reason why you dont want to use a UIListLayout? I dont really see any restriction w/ ba that would invalidate them for use. We use them in Boba with our modified version of it

If you’re set on not using them try using TextService:GetTextSize() and adjusting the offset as appropriate:

#17

ui looks good btw - gives me macOS vibes almost. Would be cool maybe if you added the mac resize/minimize/close buttons:

image
image1440×360 23.3 KB

#18

i’ll try this, also about the UiListLayout, the new flex features don’t support multiline, and they also don’t work in-game currently. it also positions the text weird and makes it a bit choppy

#19

ty – i have a slightly better looking version that wasn’t applied ingame yet LOL

#20

Update! Using UiPadding and a UiListLayout, I was able to keep the look the same, whilst preventing overlap and aligning everything properly as doing math equations for a list is sometimes too complicated - resolved this! :smiley:

(and new flex features on uilistlayouts)