Dropdown in Reveal does not render over reveal because of overflow-y: hidden
- Dominant language
- JavaScript
- Stars
- 29.8k
- Forks
- 5.4k
- Avg merge
- 25m
- Merged PRs (30d)
- 1
Description
## What should happen?
I have a reveal and a dropdown in it. I click, the dropdown appears and because it's bigger than the reveal, it overflows.
## What happens instead?
overflow dropdown is hidden due to overflow-y: hidden
## Possible Solution
I try to disabled the overflow and it seems to work., But i am kinda worry what it might cause.
## Test Case and/or Steps to Reproduce (for bugs)
you can try it here: https://codepen.io/Deathlex/pen/LYdoMgV)
How to reproduce:
1. have reveal with bigger dropdown
## Context
I would like to know why is there overflow-y in the first place. I'll be grateful for info.
## Your Environment
- Foundation version(s) used: in 6.5.1 version of foundation but it apears to happend in older ones too
- Browser(s) name and version(s): chrome
- Device, Operating System and version:
- Link to your project:
## Checklist
- [x] I have read and follow the CONTRIBUTING.md document.
- [x] There are no other issues similar to this one.
- [x] The issue title and template are correctly filled.
Contributor guide
Research direction
Start with the linked CodePen reproduction and inspect the Reveal and dropdown styles responsible for overflow-y: hidden. Confirm the behavior in Foundation 6.5.1 and define done as allowing an oversized dropdown to render outside the Reveal without breaking the modal layout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100