Skip to main content

 

I’m having an issue with creating a reusable list component that can have various amounts of list items that scrolls correctly.

I created a list item component group with 15 list items, embedded that into a list item drop down. I was hoping to just hide list items in that drop down component instance but the issue I’m having is the container keeps the original height which leaves a large white space at the bottom of my scroll.

 

How can I create this without having to make a list item component variant for each number if list items I need and have it scroll correctly?

 

(This works but seems insane)

 

​@Loren Tracy With Figma there are probably a dozen other ways to address this. But I created an example file where I show one way you could set this up, using minimal components.

In my example I also have the Scroll list hug (with a max-height) the list items if there are fewer than 5 items but if there are more than 5 list items it will scroll.

Hope this helps!

Link to Prototype >
Link to Figma File >

 

​@Nate_G Dude, Thanks! That is exactly what I needed and now I understand my issue. I was trying to handle the scrolling on the dropdown component instead of the list component. 

 

Many thanks!  

Terms & ConditionsCookie settings