Using BorderSizePixel in with buttons at the top within a ScrollingFrame

Resources Community Tutorials
#1

You may or may not have encountered this issue. But picture this. You insert a ScrollingFrame, and within it you insert a Button and a UIGridLayout. Lastly, you apply a UIStroke or set a BorderSizePixel value to the Button that you’ve just inserted. Everything seems normal, except for one thing… the strokes do not appear at the top portion of the button.

image
This needs fixing, immediately! So let’s get started, shall we?

:hammer: Fixing this mess

Step 1

Create a normal Frame and resize it to be as large or as small as you want.

Step 2

Create a ScrollingFrame and set it’s parent to the Frame that you’ve just created

Step 3

  • Set ClipDescendants to TRUE within the Frame’s properties.
  • Set ClipDescendants to FALSE within the ScrollingFrame’s properties.

Step 4

  • Set the size of the ScrollingFrame to something like {0.95, 0},{0.95, 0}. You might have to play around with these numbers for yourself, but the point here is to make the ScrollingFrame slightly smaller than the Frame that it is parented to.

Step 5

  • Move the ScrollingFrame so that it is centered to the Frame.
    image

:tada: Done

You are now done! As you can see, the extra thick outlines now show on all 4 sides of the button. Good job.

You may wonder, “but why not use UIPadding”? Well for me personally I’ve never seen it as an option because it’s properties pushed my buttons out of frame the more buttons that I added over time. Hence, this solution was developed.