Clarity: Dropdowns have excessive spacing with large lists

[mattmutt]

Select one ... (check one with "x")

[ ] bug
[ ] feature request
[ x ] enhancement

Expected behavior

1. many entries in the list, constrained by viewport => clipped content that is not accessible

1. Other problems include dividers having excessive spacing and the internal padding within .dropdown-menu class and its top margin ( causes a slight gap )

Actual behavior

Suggested fix: compensate by restricting height according to a natural container and letting the list overflow with scrolling. This can be done via CSS; however it is better if widgets commonly accept some type of constraint definition to aid when real estate is limited. This aligns better to responsive strategies.

Reproduction of behavior

Environment details

• Angular version: 2.0.X
  4.2
• Clarity version:
  0.9

• OS and version:

• Browser: [all ]

[youdz]

I think putting a maximum height by default on Dropdown is too problematic though.

But what we can do is let you, the consumer, set a max height to any dropdown in CSS depending on your own constraints, and we would make sure that the styles can handle it and that the dropdown menu would scroll. I think that would be the most flexible solution.

[mathisscott]

Per earlier discussion with @mattmutt

This issue covers a few suggested enhancements/changes to dropdowns...

1) Tightening up the whitespace above and below dividers in a dropdown menu.
2) Tweaking the whitespace at the top and bottom of a dropdown menu such that it better matches the perceived horizontal whitespace on the sides and, incidentally, tightens up a bit.
3) Adjusting the placement of dropdown menus triggered from the header so that they appear closer to the bottom of the header.

and

4) Gracefully handling scrolling when a dropdown is to large to fit on a page. <= this may need to be part of the "collision detection" issue #1262

@reddolan and @lil-kim : I support the top 3 suggestions from what I have seen of them. If one of you could advise on the edits, I'd appreciate it.

@youdz : Is number 4 a collision detection feature or something that can be accomplished with just CSS on our end?

[youdz]

If we have to detect that it doesn't fit, it's collision detection, yes.

[lil-kim]

@mathisscott, Will see what I can do.

[lil-kim]

Here's the spec for padding adjustments:

Reviewed & approved by: @mathisscott, @reddolan

[mattmutt]

when a dropdown is aligned to be on the bottom, there remains a 2px top margin inside .dropdown-menu. While tiny, it does expose 2 pixels of non active space between the target and the top edge of the popped up dropdown widget. What does this mean in simple terms? Dropdowns would not be flush to their target container.

[mathisscott]

@mattmutt
This was intentional. When working with moving the dropdowns in the header, I found that pushing them flush to the bottom of the header was not as effective at communicating the relationship between the trigger and the dropdown. So I adjusted spacing to where it was a combination of visually appealing and reinforced that relationship.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.