Skip to main content

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.


Screenshot 2022-07-29 at 12.43.52

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

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.

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.

Here is the file - WeTransfer - Send Large Files & Share Photos Online - Up to 2GB Free

And the view link - https://www.figma.com/file/iLumbdeDZT8xwSflB5fufM/Untitled?node-id=0%3A1

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 🙂

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


Thanks Dennis, you helped resolve my issue.

Terms & ConditionsCookie settings