CODEWITHSUNDEEP
javascripthtmlcssreactjs
Jpark9061
Jpark9061

Reputation: 1120

How to make div component go over on top of any other component (h1 or p)

The following code gives this result:

enter image description here

Is there a way I can get the dropdown to go over on top of the 'HELLO's so it doesn't show the h1 and p tag? I tried using z-index but to no success. I tried making parent element of overall component to be relative and dropdown (child) to be absolute, but has not worked. I specifically want the dropdown to be on top of ANYTHING, and don't want to make z-index of the h1 or p to be negative for example. Would there be a solution that makes the dropdown be on top of every element?

Again, I would really appreciate a solution that makes the DROPDOWN go on top of every element, not the h1 or p tag. Thanks!

I abstracted most of the methods away for the sake of simplicity, but here is the fully working 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;
`

Upvotes: 0

Views: 325

Answers (1)

Ramakay
Ramakay

Reputation: 3145

Not sure if this is a lo-fi solve for what you need

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;
  background-color: white;
  height: 100%;
`;

Added the background-color and height to get you there. https://codesandbox.io/s/great-mendeleev-2dl7n?file=/src/styled-dropdown-selector.js:353-609

Upvotes: 1

Related Questions