Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dropdown has Y overflow by default #19857

Closed
chadsowald opened this issue Sep 18, 2021 · 2 comments · Fixed by #20636
Closed

Dropdown has Y overflow by default #19857

chadsowald opened this issue Sep 18, 2021 · 2 comments · Fixed by #20636
Assignees
@khmakoto
Labels
Component: Dropdown Fluent UI react (v7) Fluent UI react (v8) Issues about @fluentui/react (v8) Status: Fixed Fixed in some PR Type: Bug 🐛

Comments

@chadsowald
Copy link

Environment Information

  • Package version(s): 7.170.3
  • Browser and OS versions: Not relevant

Please provide a reproduction of the bug in a codepen:

https://codepen.io/chmsft/pen/ZEyrwrQ

Actual behavior:

There is a 1px vertical overflow as the dropdown caret has both 'top: 1px" and height: 32px, but the containing box is 32px.

Expected behavior:

There should be no vertical overflow by default. I assume the intention was to vertically center the caret in the dropdown. The CodePen has 2 potential fixes that maintain that intention.

Priorities and help requested:

Are you willing to submit a PR to fix? No, but the CodePen has 2 potential fixes.

Requested priority: (Blocking, High, Normal, Low): Normal
@gouttierre
Copy link
Contributor

Thanks for filing this issue with us. To set expectations the developers will review this issue once capacity allows. Unless you are willing to submit the fix and our team will have a look at it.

@bsunderhus - Would you be able to confirm if this is a regression, or if this behavior is an issue?

@gouttierre gouttierre added Component: Dropdown Fluent UI react (v7) Needs: Investigation The Shield Dev should investigate this issue and propose a fix and removed Needs: Triage 🔍 labels Oct 25, 2021
@khmakoto
Copy link
Member

khmakoto commented Nov 17, 2021 •
edited
Loading

Hi @chadsowald, I can confirm this is happening and we should fix it.

@gouttierre and anyone else that takes a look at this, fyi this can be seen when zooming in to the component and happens in both v7 and v8.

image

@khmakoto khmakoto added the Fluent UI react (v8) Issues about @fluentui/react (v8) label Nov 17, 2021
@khmakoto khmakoto self-assigned this Nov 17, 2021
@khmakoto khmakoto added Type: Bug 🐛 and removed Needs: Investigation The Shield Dev should investigate this issue and propose a fix labels Nov 17, 2021
@khmakoto khmakoto mentioned this issue Nov 17, 2021
Merged
2 tasks
msft-fluent-ui-bot pushed a commit that referenced this issue Nov 17, 2021
@khmakoto
Dropdown: Removing unintended extra height (#20636)
20a59a5 
#### Pull request checklist

- [x] Addresses an existing issue: Fixes #19857
- [x] Include a change request file using `$ yarn change`

#### Description of changes

The down caret icon in `Dropdown` was specified with the height of the component but absolutely positioned as `top: 1` which actually made it 1 pixel taller than the `Dropdown` itself. This created a scrollbar in high zoom settings. This PR fixes this by specifying `paddingTop: 1` and `top: 0` so that the caret is still in the same position but the its height is not taller than that of the component itself.
@msft-fluent-ui-bot msft-fluent-ui-bot added Status: Fixed Fixed in some PR and removed Status: In PR labels Nov 17, 2021
@microsoft microsoft locked as resolved and limited conversation to collaborators Dec 18, 2021
mlp73 pushed a commit to mlp73/fluentui that referenced this issue Jan 17, 2022
@khmakoto
Dropdown: Removing unintended extra height (microsoft#20636)
3b0f6f2 
#### Pull request checklist

- [x] Addresses an existing issue: Fixes microsoft#19857
- [x] Include a change request file using `$ yarn change`

#### Description of changes

The down caret icon in `Dropdown` was specified with the height of the component but absolutely positioned as `top: 1` which actually made it 1 pixel taller than the `Dropdown` itself. This created a scrollbar in high zoom settings. This PR fixes this by specifying `paddingTop: 1` and `top: 0` so that the caret is still in the same position but the its height is not taller than that of the component itself.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@khmakoto khmakoto

Labels
Component: Dropdown Fluent UI react (v7) Fluent UI react (v8) Issues about @fluentui/react (v8) Status: Fixed Fixed in some PR Type: Bug 🐛
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Dropdown: Removing unintended extra height khmakoto/fluentui
5 participants
@chadsowald @khmakoto @GeoffCoxMSFT @msft-fluent-ui-bot @gouttierre