The outcome of the code below is displayed in this image:
https://i.stack.imgur.com/CPDqC.png
Is it possible to make the dropdown overlap on top of the 'HELLO's text, hiding the h1 and p tags? I have tried using z-index without success. Making the parent element relative and the child (dropdown) absolute did not work either. I need the dropdown to appear on top of any element, without changing the z-index of the h1 or p tags. Is there a solution to achieve this?
I am looking for a way to ensure that the DROPDOWN always appears on top of every element, excluding the h1 or p tags. Thank you!
For simplicity, most of the methods have been abstracted. Here is a link to the fully functional version: https://codesandbox.io/s/quirky-shadow-zsr21?file=/src/styled-dropdown-selector.js
App.js
const App = () => {
return (
<>
<DropdownSelector
lineColour="#000000"
arrowColour="#000000"
width="100%"
onSelect={(value, options) => console.log(value, options)}
options={[
{ label: '3777 Kingsway, Burnaby, BC V5H 3Z7', id: 1 },
{ label: '3888 Kingston, Ontario, ON V5H 3Z7', id: 2 },
{ label: '2999 Address, Vancouver, BC V5H 3Z7', id: 3 },
{ label: '4777 George, Richmond, BC V5H 3Z7', id: 4 },
{ label: '4222 Topaz, Coquitlam, BC V5H 3Z7', id: 5 },
{ label: '4333 Walnut, Langley, BC V5H 3Z7', id: 6 },
]}
/>
<p>HELLO HELLO HELLO</p>
<h1>HELLO HELLO HELLO</h1>
<h1>HELLO HELLO HELLO</h1>
</>
)
};
DropdownSelector.js
import React, { useState, useRef } from 'react';
import { SelectBox, SuggestionBox, SuggestionLabel, InvisibleButton } from './styled-dropdown-selector';
const DropdownSelector = ({ options, onSelect }) => {
const initialValue = options ? options[0].label : '';
const [val, setVal] = useState(initialValue);
const [suggestions, setSuggestions] = useState([]);
const [toggleEnabled, setToggleEnabled] = useState(false);
const suggestionValue = () => {
return suggestions.map(option => {
return (
<SuggestionLabel onMouseDown={() => setVal(option.label)}>
{option.label}
</SuggestionLabel>
);
});
};
return (
<div>
<SelectBox value={val} />
<InvisibleButton >
<img src={Arrow} alt="arrow" />
</InvisibleButton>
<div>
{toggleEnabled && (
<SuggestionBox>
{suggestionValue()}
</SuggestionBox>
)}
</div>
</div>
);
};
export default DropdownSelector;
styled-drpodown-selector.js
import styled from 'styled-components';
export const SelectBox = styled.input`
outline: none;
border: none;
background: none;
width: 100%;
height: auto;
margin: auto;
display: inline;
padding-bottom: 5px;
margin-bottom: 5px;
margin-top: 5px;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 19px;
`;
export const SuggestionBox = styled.div`
position: absolute;
width: ${props => props.width};
margin-left: 0px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
padding-top: 5px;
padding-bottom: 5px;
`;
export const SuggestionLabel = styled.button`
outline: none;
background: none;
border: none;
width: 100%;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 19px;
text-align: left;
margin-left: 5px;
margin-right: 5px;
padding: 5px 0px 5px 0px;
transition: all 0.3s ease;
&:hover {
background: #e8e8e8;
}
`;
export const InvisibleButton = styled.button`
position: relative;
top: 5px;
float: right;
margin-right: 3px;
margin-top: -32px;
cursor: pointer;
background: none;
outline: none;
border: none;
width: auto;
height: auto;
display: inline;
`