Issue with Button Positioning in Plugin Widget

[GamingLamaWasTaken (GamingLama)]

Hello everyone,

I’m currently working on a Roblox plugin and I’ve run into an issue with the positioning of buttons within a widget. The problem is that the buttons (icons) are not staying in their assigned positions when the widget is resized.

Here’s the relevant part of my code:

local function createButton(parent, text, position)
	local button = createUI(parent, "TextButton", {
		Size = UDim2.new(0.25, 0, 0, 30),
		AnchorPoint = Vector2.new(0.5, 0.5),
		Position = position,
		Text = text,
		TextColor3 = Color3.new(1, 1, 1),
		Font = Enum.Font.SourceSans,
		TextSize = 20,
		BackgroundTransparency = 1
	})
	createUI(button, "UICorner", {CornerRadius = UDim.new(0, 10)})
	local scale = Instance.new("UIScale")
	scale.Scale = 1
	scale.Parent = button
	return button
end

local loadButton = createButton(mwidget, "T", UDim2.new(0, 0, 0, 0))
loadButton.AnchorPoint = Vector2.new(0, 0)

local function createImageButton(parent, imageId, position)
	local button = createUI(parent, "ImageButton", {
		Size = UDim2.new(0.25, 0, 0, 30),
		AnchorPoint = Vector2.new(0, 0),
		Position = position,
		Image = imageId,
		BackgroundTransparency = 1,
		ImageColor3 = Color3.new(1, 1, 1)
	})
	createUI(button, "UICorner", {CornerRadius = UDim.new(0, 10)})
	local scale = Instance.new("UIScale")
	scale.Scale = 1
	scale.Parent = button
	return button
end

local imageButton = createImageButton(mwidget, "rbxassetid://", UDim2.new(0.25, 0, 0, 0))

In this code, I’m creating a TextButton and an ImageButton within a widget. I’ve set the Size, AnchorPoint, and Position properties for each button, but they don’t seem to stay in their assigned positions when the widget is resized.

I would appreciate any help or suggestions on how to fix this issue. Thanks in advance!

[GamingLamaWasTaken (GamingLama)]

This is what i Expect

This is what happends.

So when i scale the Widget it should not effect the buttons.

[Dev_AymanGR (Ayman)]

just change the ScaleType to Fit

local function createImageButton(parent, imageId, position)
	local button = createUI(parent, "ImageButton", {
		Size = UDim2.new(0.25, 0, 0, 30),
		AnchorPoint = Vector2.new(.5, .5),
		Position = position,
		Image = imageId,
		BackgroundTransparency = 1,
		ImageColor3 = Color3.new(1, 1, 1),
		ScaleType = Enum.ScaleType.Fit, --// like in here
	})
	createUI(button, "UICorner", {CornerRadius = UDim.new(0, 10)})
	local scale = Instance.new("UIScale")
	scale.Scale = 1
	scale.Parent = button
	return button
end

i hope this will fix your issue

[Dev_AymanGR (Ayman)]

You can use “UIGridLayout” to position them as a list here is an example :

--// This is for the UIGridLayout //--

local UiGridLayout = createUI(Ui, "UIGridLayout", {
	CellPadding = UDim2.new(0, 5, 0, 5),
	CellSize = UDim2.new(0, 30, 0, 30),
	FillDirection = Enum.FillDirection.Horizontal,
	StartCorner = Enum.StartCorner.TopLeft,
	HorizontalAlignment = Enum.HorizontalAlignment.Left,
})

--// and this is for the UIPadding //--

local UiGridLayout = createUI(Ui, "UIPadding", {
	PaddingTop = UDim.new(0,7), 
	PaddingBottom = UDim.new(0,0),
	PaddingLeft = UDim.new(0,10),
	PaddingRight = UDim.new(0,0),
})

and about the “TextBox” you can put it on another Frame