Dropdown under footer
See original GitHub issueHello everybody
I’m currently facing an issue when using react-select.
As you can see, when I open the select, the dropdown is partly displayed under the footer. I have tried everything (z-index, overflow, position, …).
The current style applied to react-select:
* {
cursor: default !important;
font-family: 'Open sans', sans-serif !important;
outline: none !important;
}
.Select-control {
background-color: ${({ theme }) => theme.colors.lightText};
border-radius: 0.375rem;
border: 0;
box-shadow: 0.0625rem 0.0625rem 0.1875rem rgba(0,0,0,0.3) inset;
color: ${({ theme }) => theme.colors.accentHover};
font-size: 0.8rem;
font-weight: normal;
height: 2.5rem;
${core.mediaQueries.medium`
font-size: 0.9rem;
`};
}
.is-open > .Select-control {
background-color: ${({ theme }) => theme.colors.lightText};
}
.Select-control:hover {
box-shadow: 0.0625rem 0.0625rem 0.1875rem rgba(0,0,0,0.3) inset;
}
.Select-arrow-zone {
align-items: center;
display: flex;
justify-content: center;
}
.Select-control .Select-input:focus {
outline: none;
outline-offset: 0;
}
.Select-control .Select-value {
height: 100%;
}
.Select-control .Select-value .Select-value-label {
height: 100%;
}
.Select-control .Select-value > div > div {
margin-left: 1.5rem;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
${core.mediaQueries.medium`
max-width: 95%;
width: auto;
`};
}
.Select-menu-outer > div > div > span {
height: 0;
margin: 0 1.5rem 0 0;
width: 0;
}
.Select-menu-outer {
max-height: 600px;
overflow: hidden;
${core.mediaQueries.medium`
max-height: 600px;
`};
}
.Select-menu {
max-height: 600px;
overflow-y: visible !important;
}
.Select-menu-outer > div > div {
font-size: 0.8rem;
padding: 0.5rem 0;
${core.mediaQueries.medium`
font-size: 0.9rem;
`};
&:last-child {
margin-bottom: 2.5rem;
}
}
.Select-menu-outer > div > div:hover {
background-color: ${({ theme }) => theme.colors.lightText};
}
.is-focused:not(.is-open) > .Select-control, .is-focused.is-open > .Select-control {
outline: none;
outline-offset: 0;
}
.Select-noresults {
margin-left: 1.5rem;
}
When I change the z-index of the footer to -1, the dropdown is displayed good, but then the links in my footer aren’t clickable…
Thanks in advance Ilias
Issue Analytics
- State:
- Created 5 years ago
- Reactions:4
- Comments:16 (1 by maintainers)
Top Results From Across the Web
Dropdown Menu hidden under Footer - Stack Overflow
This can happen if the parent element has overflow:hidden property. Then z-index has no effect. Try removing overflow property from your ...
Read more >Drop Up Menus From Your Footer - Medium
Below I've laid out the steps to make your own drop up menu for your projects. 1. MAKE A HTML AND CSS FILE....
Read more >Dropdown appears beneath footer - Support - Themeco Forum
Hi,. Can you help me figure out why my top nav dropdown menu appears beneath my Pro footer? http://dev-cjk-tattoo.pantheonsite.io/.
Read more >Dropdown - fixed footer - CodePen
Adding Classes. In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template....
Read more >Set up drop-down menus in your online store
Footer menus can only display top level items, meaning drop-down menus can't be ... or moving menu items so that they are "nested"...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
If you are using v2 of react-select, you can use the
menuPortalTarget
prop to render the dropdown into a parent container (e.g.body
) of the footer.CodeSandbox
If you’re having this issue in v2 or later, pl follow the portalling instructions here — https://react-select.com/advanced#portaling
TLDR — you need these two additional props