Making dropdown appear on top of map

Faraz Anwar 0
Viewed 38

I'm trying to create a map with drop down in it I want the drop down to appear on the map like map shows in background and dropdown on top of it. Right now it is looking like this

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 100;
  overflow: auto;
  height: 100px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

#map {
  margin: 0 0 0 0;
  height: 100vh;
  width: 100%;
  position: absolute;
  display: block;
}
<div class="col-lg-12 col-12 col-md-12 col-sm-12" style="padding-left: 0px; padding-right:0px;">
  <div class="dropdown">
    <span>Select Country</span>
    <div class="dropdown-content">

    </div>
  </div>
  <div id="map"></div>

</div>

and here is the code:

leaflet javascript css html
5 Answers

I think you need z-index. Try something like this,

.dropdown {
    position: absolute;
    display: inline-block;
    left: 0;
    top: 0;
    z-index: 3;
}
#map {
    margin: 0 0 0 0;
    height: 100vh;
    width: 100%;
    z-index: 1;
    position:absolute;
    display: block;
}
Shri Hari L0

You have to add position: relative; in the parent and then position: absolute; on the dropdown.

Something like this

#container {
position: relative;
}

.dropdown {
    position: absolute;
    display: inline-block;
    top: 1rem;
    left: 1rem;
background-color: #f9f9f9;
  }
  
  .dropdown-content {
    display: none;
    position: relative;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 100;
    overflow: auto;
    height: 100px;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }

#map {
    margin: 0 0 0 0;
    height: 100vh;
    width: 100%;
    background-color: red;
    padding: 10rem;
    /*position:absolute;
    display: block;*/
}
<div id="container" class="col-lg-12 col-12 col-md-12 col-sm-12" style="padding-left: 0px; padding-right:0px;"> 
      <div class="dropdown">
        <span>Select Country</span>
        <div class="dropdown-content">
          
        </div>
      </div>
        <div id="map">This is the map</div>
        
    </div>
</div>

Arnau0

Case 1: Replace the .dropdown:hover .dropdown-content's display property to inline

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 100;
  overflow: auto;
  height: 100px;
}

.dropdown:hover .dropdown-content {
  display: inline;
}

#map {
  margin: 0 0 0 0;
  height: 80vh;
  width: 250px;
  width: 100%;
  position: absolute;
  display: block;
  border: 1px red solid;
}
<div class="col-lg-12 col-12 col-md-12 col-sm-12" style="padding-left: 0px; padding-right:0px;">
  <div class="dropdown">
    <span>Select Country</span>
    <div class="dropdown-content">

    </div>
  </div>
  <div id="map"></div>

</div>
</div>

Case 2: Put the select-menu inside the map div.

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: relative;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 100;
  overflow: auto;
  height: 100px;
}

.dropdown:hover .dropdown-content {
  display: inline;
}

#map {
  margin: 0 0 0 0;
  height: 80vh;
  width: 250px;
  width: 100%;
  position: absolute;
  display: block;
  border: 1px red solid;
}
<div class="col-lg-12 col-12 col-md-12 col-sm-12" style="padding-left: 0px; padding-right:0px;">
  
  <div id="map">
    <div class="dropdown">
    <span>Select Country</span>
    <div class="dropdown-content">

    </div>
  </div>
  </div>

</div>

Case 3: You can also put position: relative to the parent and position: absolute to the child. Then you can play around with the top, bottom, left, right properties.Read on MDN. But again, to achieve this you must put the select-menu (the children) inside the map (parent). Hope this helps.

Vivek K.0

replaced dropdown-content:absoulteand pushing 100% from top top:100%. keeping the height:0 and adding the height:100px and padding on hover. because in case you want animation you woulnt be able to do it display:none also added a transition:all 0.25s ease-in-out;

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  left:0;
  top:100%;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 100;
  overflow: hidden;
  height: 0px;
  transition:all 0.25s ease-in-out;
}

.dropdown:hover .dropdown-content {
  padding: 12px 16px;
  height:100px;
  
}

#map {
  margin: 0 0 0 0;
  height: 100vh;
  width: 100%;
  position: absolute;
  display: block;
}
<div class="col-lg-12 col-12 col-md-12 col-sm-12" style="padding-left: 0px; padding-right:0px;">
  <div class="dropdown">
    <span>Select Country</span>
    <div class="dropdown-content">
     
    </div>
  </div>
  <div id="map"></div>

</div>

UmairFarooq0

It would be best to wrap both the components in a container, giving the container the position: relative attribute, then position the dropdown using position: absolute with the top and left values you require.

Here is an example of how you would achieve it:

  .container {
    position: relative;
  }
  .dropdown {
    position: absolute;
    background: white; /* TODO: Remove this temporary styling */
    display: inline-block;
    top: 5px;
    left: 5px;
    z-index: 1000;
  }

  .dropdown-content {
    display: none;
    position: relative;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    z-index: 100;
    overflow: auto;
    height: 100px;
  }

  .dropdown:hover .dropdown-content {
    display: block;
  }
  #map {
    background: black; /* TODO: Remove this temporary styling */
    background-image: url('https://i.imgur.com/hiuuHaf.png'); /* TODO: Remove this temporary styling */
    background-repeat: no-repeat; /* TODO: Remove this temporary styling */
    margin: 0 0 0 0;
    height: 100vh;
    width: 100%;
    display: block;
  }
<div
  class="col-lg-12 col-12 col-md-12 col-sm-12"
  style="padding-left: 0px; padding-right: 0px">
  <div class="container">
    <div class="dropdown">
      <span>Select Country</span>
      <div class="dropdown-content"></div>
    </div>
    <div id="map"></div>
  </div>
</div>

Simply remove the CSS where I have commented /* TODO: Remove this temporary styling */ which is purely for demonstration purposes

CoderYen0
Related