I'm currently working on a project using this React Template.
Within one of the components, there's a Select List followed by a Card element.
The issue arises when I click on the list, as the items appear beneath the card:
https://i.sstatic.net/yJlfE.png
Upon investigating, it seems that the problem stems from the CSS code in the template which positions the card above other elements.
To confirm this, I set up a new React project with:
npx create-react-app
My suspicion was correct.
I essentially duplicated the same code:
const selectStyles = {
control: (styles) => ({ ...styles, backgroundColor: "white" }),
option: (styles) => {
return {
...styles,
backgroundColor: "green",
"z-index": -5,
};
},
};
export default class App extends Component {
render() {
return (
<Fragment>
<Select
className="basic-single"
classNamePrefix="select"
defaultValue={colourOptions[0]}
name="color"
options={colourOptions}
styles={selectStyles}
/>
<Card
style={{
position: "absolute",
"background-color": "red",
"z-index": 5,
}}
>
<CardImg
top
width="100%"
src="/assets/318x180.svg"
alt="Card image cap"
/>
<CardBody>
<CardTitle tag="h5">Card title</CardTitle>
<CardSubtitle tag="h6" className="mb-2 text-muted">
Card subtitle
</CardSubtitle>
<CardText>
Some quick example text to build on the card title and make up the
bulk of the card's content.
</CardText>
<Button>Button</Button>
</CardBody>
</Card>
</Fragment>
);
}
}
After implementing this, the select items now display ABOVE the card:
https://i.sstatic.net/a7KO1.png
The card itself is now highlighted in red.
CONCLUSION: The root of the issue lies within the card's CSS code provided by the template.
Despite attempting various configurations with the z-index property, the problem persists.
Any suggestions on how to address this?