TopBar Alignment Broken in Studio

Help and Feedback Scripting Support
, , , ,
1

Hey everyone,

I recently noticed a weird issue while using the TopBar API in Roblox Studio. I’ve been using it for a while without problems, but now it seems like :align("Left") and :align("Right") don’t work properly in Studio.

In actual games, these alignments work fine, but in Studio, the TopBar doesn’t seem to recognize the window size correctly. The button ends up misaligned (usually to the left of the Roblox icon) while :align("Center") is the only one that seems to behave normally.

I’ve tried a bunch of things to fix it:

  • Restarting my PC
  • Testing older games (same bug)
  • Updating to the latest TopBar API

…but nothing seems to help.

This is super frustrating because:

  • It makes testing TopBar buttons in Studio unreliable, so I can’t see exactly how they’ll behave in a real game.
  • I don’t want to add extra code just to make Studio look correct while still working properly in live games.

Has anyone else run into this issue, or is there a workaround? It’s really annoying for anyone trying to develop and test TopBar features smoothly in Studio.

image
image1591×228 73.5 KB

Script that I’m using:

local Players = game:GetService("Players")
local Workspace = game:GetService("Workspace")

local Remotes = ReplicatedStorage:WaitForChild("Remotes")
local SettingsRemote = Remotes:WaitForChild("SettingsEvent")

local container = script.Parent
local Icon = require(container:WaitForChild("Icon"))

local plr = Players.LocalPlayer
local plrGui = plr.PlayerGui

local currentSettings = {}

local ProfileBackground = plrGui:WaitForChild("ProfileGui"):WaitForChild("Main")

--// Music and sound references
local music = Workspace:WaitForChild("Music")
local soundsFolder = ReplicatedStorage:WaitForChild("Sounds")
local clickSound = soundsFolder:WaitForChild("Click")
local hoverSound = soundsFolder:WaitForChild("Hover")

--// Main Settings icon
local SettingsIcon = Icon.new()
	:setImage(105645877854135) -- default
	:setImage(10002373478, "Selected") -- dropdown open
	:setImage(105645877854135, "Deselected") -- dropdown closed
	:setLabel("Settings")
	:align("Center")
	:setCaption("Toggle your settings")

--// Optional topbar icons
local ProfileIcon = Icon.new()
	:align("Right")
	:setImage(15728996305)
	:setCaption("Profile")
	:bindToggleItem(ProfileBackground)

--// Music toggle
local MusicButton = Icon.new()
	:autoDeselect(false)
	:joinDropdown(SettingsIcon)
	:setLabel("Music: Enabled")
	:setImage(12159177184)
	:setLabel("Music: Disabled", "Selected")
	:setLabel("Music: Enabled", "Deselected")

--// SFX toggle
local SFXButton = Icon.new()
	:autoDeselect(false)
	:joinDropdown(SettingsIcon)
	:setLabel("SFX: Enabled")
	:setImage(133328822613992)
	:setLabel("SFX: Disabled", "Selected")
	:setLabel("SFX: Enabled", "Deselected")

----------------------------------------------------------------------
--// Functions to apply settings
----------------------------------------------------------------------

local function applyMusicSetting()
	if currentSettings.music then
		if not music.IsPlaying then
			music:Play()
		end
	else
		music:Pause()
	end
end

local function applySFXSetting()
	if currentSettings.sfx then
		clickSound.Volume = 1
		hoverSound.Volume = 1
	else
		clickSound.Volume = 0
		hoverSound.Volume = 0
	end
end

----------------------------------------------------------------------
--// Receive settings from server
----------------------------------------------------------------------

SettingsRemote.OnClientEvent:Connect(function(settingsData)
	currentSettings = settingsData or { music = true, sfx = true }

	-- Sync UI buttons to match settings
	if currentSettings.music == false then
		MusicButton:select()   -- selected = OFF
	else
		MusicButton:deselect() -- deselected = ON
	end

	if currentSettings.sfx == false then
		SFXButton:select()   -- selected = OFF
	else
		SFXButton:deselect() -- deselected = ON
	end

	-- Apply settings visually
	applyMusicSetting()
	applySFXSetting()
end)

----------------------------------------------------------------------
--// Topbar icon behavior
----------------------------------------------------------------------

SettingsIcon.selected:Connect(function()
	SettingsIcon:setImage(10002373478)
end)

SettingsIcon.deselected:Connect(function()
	SettingsIcon:setImage(105645877854135)
end)

----------------------------------------------------------------------
--// Button toggle logic
----------------------------------------------------------------------

MusicButton.selected:Connect(function()
	MusicButton:setLabel("Music: Disabled")
	currentSettings.music = false
	applyMusicSetting()
	SettingsRemote:FireServer(currentSettings)
end)

MusicButton.deselected:Connect(function()
	MusicButton:setLabel("Music: Enabled")
	currentSettings.music = true
	applyMusicSetting()
	SettingsRemote:FireServer(currentSettings)
end)

SFXButton.selected:Connect(function()
	SFXButton:setLabel("SFX: Disabled")
	currentSettings.sfx = false
	applySFXSetting()
	SettingsRemote:FireServer(currentSettings)
end)

SFXButton.deselected:Connect(function()
	SFXButton:setLabel("SFX: Enabled")
	currentSettings.sfx = true
	applySFXSetting()
	SettingsRemote:FireServer(currentSettings)
end)

Thanks in advance for any advice!

1 Like
2

Only workaround I can think of is manually setting the inset

1 Like
3

It was working perfectly fine like some hours ago, now it doesn’t. It works fine in real games but the main thing that I wanted it to work in studio because it’s a little bit annoying (and time wasting) testing in real games

4

Strange. Well I wrote this piece of code for something else I was making.

while task.wait() do
	--print(game.GuiService.TopbarInset.Min.X)
	local inset = game.GuiService.TopbarInset.Min.X
	script.Parent.PaddingLeft = UDim.new(0, 
		if inset < 120 then
			120
			else
			game.GuiService.TopbarInset.Min.X
	)
end

(script.Parent is a UIPadding)

1 Like
5

Does this script configure anything related to the position of the icons? If so it will be very useful to me

6

Well you can insert a UIPadding into the TopbarPlus ScreenGui and put this script in it. It should work

7

How can you insert a UI padding thought? I’ve tested adding some other UI elements in it before but every time I did that, the TopBar broke

8

Personally I don’t have much experience with TopbarPlus so I’m not sure. But you can try inserting it via a script

9

It’s update studio

just check in-game, it will work normally (people have posted topic (and in topbar topic) about this too, solution was none than other check in-game and see just works normally as mentioned)

10

I’ve been using TopBarPlus for the past 1 year now. I’ve never had to deal anything related to the bug I showed before. I’ve also tried customizing the button(adding extra UI elementats with scripts) but every time it broke the entire module

11

It works perfectly fine in live games. The only reason i want it to work in studio is because it’s much more time wasting testing in live games than studio