Skip to main content
Solved

Render issue: Horizontal scroll element with padding on right side specifically


theunistm

Hello everyone.

I’m currently working on a mobile app where one of the screens has a pill filtering element pinned to the top. The idea is simply that the user swipes left and right to see the multiple options.

The element is a series of pills (built w/ auto-layout) set in an auto-layout frame. I’ve gotten the element to scroll horizontally with padding, but only to the left. Ideally, I want there to be padding on both the left & right sides.

How do I set up the element so that it displays correctly?

Thank you to anyone willing to help.

Please see the attached image for a visual reference.

Best answer by Dennis_N

Found the problem: The fixed width of your outer frame should have the viewports width (390px) so horizontal scrolling can work.

That’s it. It should work now 🙂

View original
This topic has been closed for comments

6 replies

Dennis_N
  • Power Member
  • 183 replies
  • August 4, 2022

First of all you need a frame within a frame. Both with auto layout.
The inner one where your pills are stored in set to hugged with,
the outer one with fixed width, clip content and horizontal scrolling enabled.

Then I would suggest using an additinal spacer-frame with fixed 13px width after your last item to achieve this gap if you scrolled till the end.

The auto width padding of your inner frame should be zero.
The outer frame should be 13px to have this initial padding left.

Should look like this in your layers panel:

image


theunistm
  • Author
  • 6 replies
  • August 8, 2022

Hey Dennis, thanks for the help. I’ve done everything as you suggested and the group seems to be scrolling but only to a certain point now.

It’s barely scrollable past the 5th pill. I have to pull the group to see the end, but it bounces back to the cut-off point. I’ve played around with some settings to try and figure it out but I don’t know what to look for.


Dennis_N
  • Power Member
  • 183 replies
  • August 8, 2022

I can take a look into it if you could share the component we are talking about. Otherwise I don’t know how to help anymore.


theunistm
  • Author
  • 6 replies
  • August 8, 2022

Dennis_N
  • Power Member
  • 183 replies
  • Answer
  • August 8, 2022

Found the problem: The fixed width of your outer frame should have the viewports width (390px) so horizontal scrolling can work.

That’s it. It should work now 🙂


theunistm
  • Author
  • 6 replies
  • August 8, 2022

Dude, the number of times I set the frame width to the screen space, I can’t 😅

Thanks Dennis, you helped resolve my issue.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings