Trying to make Shop Row items hide behind the scrollView image frame

[dramolxe]

Hey,

I am trying to make the items in my Shop “go behind” the frame border when they are not in view.
As you can see, when you try to scroll through the items and they need to go “off view” they do that on top of the border.

I tried to resize the Viewport and Content containers but I can’t do that since some value are being driven by other properties.

[Brian_Trotter]

I know we discussed this some earlier on Discord…

Now that I can look at things a bit more closely, looks like the Viewport is actually working as intended. The issue is that the Scroll View appears to have been designed to use a solid background as opposed to a windowed one. Here’s what I would try:

1. Create a new Image object within your ShopUI. Set the image to the desired frame you’re using in the Scroll View.
2. Copy the Scroll View’s Rect Transform (right click on the three vertical dots on the Rect transform, and choose Copy Component.
3. Go to the new Image object and select the three dots on the Rect Transform and Paste Component Values
4. Drag the Scroll View under the new Image
5. Reset the image on the Scroll View to “background”
6. Adjust the Rect transform on the Scroll View to act as padding for the outer frame. For the “button” as a background, I used 30 for Left, Top, Right, and Bottom. Season to taste.

[dramolxe]

Thanks Brian! It worked perfectly!