Widget Gui Frame's border and background color not showing up

  1. What do you want to achieve? I want my frame’s background color and border to show up on my dockwidget gui.

  2. What is the issue? all of the borders and background colors disappear when i parent it to the dock widget plugin

  3. What solutions have you tried so far? I’ve looked around the devforum and google for answers

Here is how the Gui looks when i have the widget open

Here is how the Gui is supposed to look (In StarterGUI)

as you can see the frames for some reason do not want to show their background color and borders
I looped through all descendants of the dockwidget and it says they are visible and the background transparency is at 0

It may be something with the way i am parenting the object so here is the code i have running in the modulescript :confused:

function module:Init(plugin, button) -- run when plugin is there
	
	self.plugin = plugin
	
	-- Create new "DockWidgetPluginGuiInfo" object
	local widgetInfo = DockWidgetPluginGuiInfo.new(
		Enum.InitialDockState.Float,  -- Widget will be initialized in floating panel
		false,   -- Widget will be initially enabled
		false,  -- Don't override the previous enabled state
		600,    -- Default width of the floating window
		300,    -- Default height of the floating window
		300,    -- Minimum width of the floating window
		150     -- Minimum height of the floating window
	)
	
	-- Create new widget GUI
	module.Widget = plugin:CreateDockWidgetPluginGui("TestWidget", widgetInfo)
	module.Widget.Title = "Remind Me Settings"  -- Optional widget title
	
	local UIClone = script.Parent.UI.WidgetUI:Clone()
	
	UIClone:Clone().Background.Parent = module.Widget
	
	button.Click:Connect(function()
		module.Widget.Enabled = not module.Widget.Enabled
	end)
	
	module.Widget:GetPropertyChangedSignal("Enabled"):Connect(function()
		if module.Widget.Enabled == false then
			button:SetActive(false)
		end
	end)
	
	for i, v in pairs(UIClone.Background:GetDescendants()) do -- to find properties inside dockwidget
		
		print(v)
		
		if v:IsA("Frame") or v:IsA("TextBox") or v:IsA("TextLabel") or v:IsA("TextButton") then
			if v.BackgroundTransparency then
				print(v.BackgroundTransparency)
				print(v.BorderSizePixel)
			end
		end
		print("----------------")
		
	end
	
end

Note: There are NO errors in the output and the code runs perfectly fine

anyway thank you for reading and trying to help out :slight_smile:

1 Like

Have you checked the Z indexes? The object could be covered by your scrolling frame?

1 Like

I found the problem but thanks for the suggestion :slight_smile:. The problem was that Roblox does not render any frames, only text boxes, buttons, images, and text labels, so frames were just not rendering inside the dockwidget!

(I do not really know why Roblox made the decision to do this because its just a bit more work)

anyway thanks for trying to help :smiley:

1 Like

I know this is very old but it confused me for a few hours … Roblox does most definitely render frames in plugins, however, the ZIndexBehavior of the ScreenGui it uses is Global, not Sibling. Meaning if you have a frame with a zIndex of 2, with elements inside of it with zIndex 1, it will render ontop of them. IF you test it in a ScreenGui with a ZIndexBehavior os Sibiling, it will render fine (as seen in the screenshots)

You can change the ZIndexBehavior by doing widget.ZIndexBehavior = Enum.ZIndexBehavior.Sibling or whatever you’d like. Just make sure the ScreenGui you use to preview the dock widget plugin has identical properties as the dock widget plugin.
This is mentioned on 0 plugin tutorials on the wiki, and can only be found on the widget class’s wiki page as an inherited property from LayerCollector.

I am just posting this here for anyone else that comes across this post with a similar problem to avoid confusion!

3 Likes