JedWatson / JedWatson/react-select
Z-Index doesn't seem to be configurable
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
Thanks for using react-select!
If you are going to ask a question or want to propose a change or a new feature, then please don't file an issue for this.
Questions and feature requests have their own place in our discussions section.
Are you reporting a bug or runtime error?
A bug. No matter what I try, looking back at the examples nor at the previous issue queue, I cannot affect z-index whatsoever.
Code is fairly standard:
const modelSelector = [
{ value: 'Ferrari 812 GTS', label: 'Ferrari 812 GTS' },
{ value: 'Ferrari 296 GTB', label: 'Ferrari 296 GTB' },
{ value: 'Ferrari 296 GTS', label: 'Ferrari 296 GTS' },
]
const ModelSelector = () => (
<Select options={modelSelector} placeholder="Model" />
)
I've tried all sorts of style stuff, like this:
const customStyles = {
option: (provided: any, state: any) => ({
...provided,
zIndex: 999,
}),
control: () => ({
zIndex: 999,
}),
singleValue: (provided: any, state: any) => {
const opacity = state.isDisabled ? 0.5 : 1
const transition = 'opacity 300ms'
return { ...provided, opacity, transition, zIndex: 99999 }
},
}
No luck.
This is in a React Native Web application, if that makes any difference.
How do I get z-index to work? If I put the z-index of everythingI want underneath the dropdown to -1 it works, but that's obviously not a great solution
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the shown Select and customStyles example in a React Native Web application, then inspect the dropdown's rendered stacking behavior. Done means the dropdown can appear above the surrounding content with the documented style configuration; no source files or tests are named in the issue.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, react-native, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100