Filelist component - scroll

[jbk75]

Hi, Is it somehow possible to put the filelist component to a fixed height, and display scrollbar if filelist is longer than that height?

[ghost]

Hello jbk75, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[sebastienlevert]

That's a good request. It might be possible to be achieved using CSS? Calling in code wizards @musale @Mnickii and @vogtn!

Would you still use the "more files" button? Or you would want to have "all available files within a scrolling area"?

[musale]

That's a good request. It might be possible to be achieved using CSS? Calling in code wizards @musale @Mnickii and @vogtn!

Would you still use the "more files" button? Or you would want to have "all available files within a scrolling area"?

At the moment you can achieve that by doing something like:

mgt-file-list {
  max-height: 250px;
  overflow-y: scroll;
}

and achieve the use case like the one below. In this one you'll have the "Show more items" section inside the scroll region. One way to allow this "organically" @jbk75 suggested is to allow a fixed height OR make the scrolling an optional attribute.

https://user-images.githubusercontent.com/8081536/170437858-a758a078-5001-4d26-804c-5042a0efa2ce.mp4

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment.

[jbk75]

Hi, regarding: "Would you still use the "more files" button? Or you would want to have "all available files within a scrolling area"?" I think it should depend of how many files are in the list. If files are more than X we get the "more files" button. And the X valoe should be configureable (property ?)

Best regards Jóhann

That's a good request. It might be possible to be achieved using CSS? Calling in code wizards @musale @Mnickii and @vogtn! Would you still use the "more files" button? Or you would want to have "all available files within a scrolling area"?

At the moment you can achieve that by doing something like:

mgt-file-list {
  max-height: 250px;
  overflow-y: scroll;
}

and achieve the use case like the one below. In this one you'll have the "Show more items" section inside the scroll region. One way to allow this "organically" @jbk75 suggested is to allow a fixed height OR make the scrolling an optional attribute.

filelist-scroll.mp4

[jbk75]

Hi, @musale how can I change the padding for file item in the list? (the padding is currenty default 16px) I tried following with no luck ...

mgt-file { padding:0px; }

mgt-file-item { padding:0px;

}

[musale]

Hello @jbk75 at the moment that can't be done. The conventional CSS rules need a different approach when working with web components because of the shadow DOM. The easiest fix is to add a custom CSS attribute i.e. --file-item-padding to the file-list which you can override with your own value. Feel free to create an issue for this.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment.