Tags options drop-down doesn't scroll
Tags options drop-down doesn't scroll
If you use the tags field type:
https://editor.datatables.net/reference/field/tags
the drop-down doesn't scroll which makes it difficult to access the full list of options available. This is a good example:
https://editor.datatables.net/examples/dropdown/tags-rendering.html
If you click the "New" button and then the "Country" button you get a list of countries which goes off the bottom of the screen. The scroll controls that you would normally expect to see to scroll through the list are not available. In this example if you try to scroll the list you'll actually end up scrolling the page behind it. You can instead use the arrow keys to go down but then the highlighted option disappears off the screen and you can't tell what, if anything, is selected. You can arrow up and go up past the first option and then circle back to the bottom but when you continue up it will jump to the next "page" of options but the selected option where the cursor is doesn't show up. The further up the list you go the larger sort of "dead space" you end up with between the selected item disappearing and then showing again. It's difficult to browse through the list like you'd normally do with a drop-down.
Would it be possible to restrict the drop-down to keep it from disappearing off the screen and also add a scroll bar?
Thanks.
Ben
This question has an accepted answers - jump to answer
Answers
Hi Ben,
That's a really good point - thank you. I'm surprised that skipped past me, and I'm wondering if I've broken something, but no, it looks like a really did just miss it!
The workaround is to add:
to your CSS. That will be included in the next release of Editor, with the max-height settable via a CSS variable:
--dte-dropdown-max-height.Allan
Allan,
That works great - thanks!
Ben