Custom Chat GUI has Overlap

Greetings all,

I am trying to create a custom chat GUI and am using a method that involves using multiple different textlabels for message boxes, but it seems after a certain amount of characters are reached the message boxes begin to overlap (pictured)

chatgui1
This is what the MessageBoxes look like selected in studio
image

I looked on Devforum to see if I could find any similar strategies to what I used and ways they fixed it, but this is what my heirarchy looks like
image

I have a script in ServerScriptService that inserts the player-typed message from InputBox into the MessageBoxes, a Display script that turns off default roblox chatgui and also moves the messages from box to box, and a Input script that takes the user input and allows for typing and also creates a cooldown

The display script is incredibly simple and I believe it is the culprit but any potential help or assistance would be very appreciated.

game.StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Chat, false)



local msg1 = script.Parent.MessageBoxes:WaitForChild("MessageBox1")
local msg2 = script.Parent.MessageBoxes:WaitForChild("MessageBox2")
local msg3 = script.Parent.MessageBoxes:WaitForChild("MessageBox3")
local msg4 = script.Parent.MessageBoxes:WaitForChild("MessageBox4")
local msg5 = script.Parent.MessageBoxes:WaitForChild("MessageBox5")
local msg6 = script.Parent.MessageBoxes:WaitForChild("MessageBox6")
local msg7 = script.Parent.MessageBoxes:WaitForChild("MessageBox7")



game.ReplicatedStorage.MessageContainer.ChildAdded:Connect(function(str)
	
	

	msg7.Text = msg6.Text
	msg6.Text = msg5.Text
	msg5.Text = msg4.Text
	msg4.Text = msg3.Text
	msg3.Text = msg2.Text
	msg2.Text = msg1.Text
	msg1.Text = str.Value
end)


Why can’t you just add a UIListLayout inside a scrollviewer and instantiate a new textlabel whenever a message is sent(delete old ones)?

Edit: the problem isn’t a script. You have UI just raw positioned, so eventually some will become too big for the gap in between textlabels and overlap with the other. At least add a UIListLayout to dynamically update the positions when sizes change.

How would I implement that with my current scripts? Would I just have to scrap them and rewrite everything?

Yes sorry, but it isn’t that hard. Or you could at least add a UIListLayoutlike I said.

You can use game.Players.Player.Chatted to retrieve messages, not sure why you are using ReplicatedStorage and values at all here.

Also, just so you know, custom chat UIs will be against Terms of Service by April 30th 2025. All games must use the new TextChatService provided by Roblox.

Thank you I’ll use that and UIListLayout like @scavengingbot mentioned when I rewrite it

I thought I read we’d still be allowed to do custom chat as long as we use TextChatService API though no?

Possibly, I’m not sure on that one all I know is that all places must be using TextChatService by that date but it would make sense yeah.