Skip to main content

Reusable list components that scroll

  • February 18, 2025
  • 2 replies
  • 63 views

Loren Tracy

 

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)

 

Best answer by Nate_G

@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 >

 

View original

2 replies

Nate_G
  • Power Member
  • 180 replies
  • Answer
  • February 18, 2025

@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 >

 


Loren Tracy
  • Author
  • New Member
  • 1 reply
  • February 18, 2025

@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!  


Reply


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