foundation / foundation/yeti

Dropdown in Reveal does not render over reveal because of overflow-y: hidden

Open
#12,474 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.