dowjones/react-dropdown-tree-select

Maximum height of field with tags or max number of tags

shomyx opened this issue · 4 comments

shomyx commented

I'm using this field in a form, and it usually has a lot of tags (selected values) which makes it grow too much in height. Is there a plan to add an option to place a limit on field height and then scroll the tags, or to introduce something like a maximum number of displayed tags and then another one saying for example and 100 more...? Thanks.

mrchief commented

@shomyx You can do so with CSS.

image

.react-dropdown-tree-select .dropdown .dropdown-trigger {
  max-width: 400px;
  max-height: 100px;
}
shomyx commented

@mrchief Sure, I managed to do it that way and maybe I badly formulated my question before. The issue arises again when it comes to cross-browser appearance on different OS. On Mac you have nice thin scrollbars that fade away, and on Linux or Windows you have those thick wide ones as seen on the image you shared. It would be nice to be able to keep the same appearance no matter where you use that field. Since there are a couple of custom scrollbar solutions available (for example https://www.npmjs.com/package/react-perfect-scrollbar) that look the same everywhere, is it possible to integrate some of those into your component or to create your own?

As for the limitation of number of visible tags, Antd has a nice solution you could consider too maxTagCount - https://ant.design/components/select/.

Thanks!

mrchief commented

The look of scrollbar is a widely debated topic. Some people advocate for native styles, some for the Mac styles. With most modern browsers, it is now possible to style the scrollbars. So the component tends to remain unbiased and lean more towards standards based solutions.

Regarding maxTagCount - I'll think about it. But in general, having too many options is a curse - and that's one of the reasons why ant design's tree component is so bloated and heavy. This component tries to draw a balance by using a mix of vanilla CSS and concepts like composition to avoid the bloat and complexity.

  • 👍2
shomyx commented

Thanks for the reply. I still think having that max number of tags as an option is a quite nice optional feature. Glad to hear you'll consider it. Regards!