CODEWITHSUNDEEP
javascriptcssreactjsreact-leaflet
dzuulie
dzuulie

Reputation: 41

How can I make component always on top of react-leaflet map?

Right now, only when I refresh my page, the table shows for a second and then it disappears. I don't know if its important, but the Map Component is a react-leaflet map. I would like to have a component on all the time on top of the map. How can I stop it from disappearing?

my css file:

.grid{
  height: 100vh;
} 

.map-box{
  position: relative;
  height: 100%;
}
.data-box{
  position: absolute;
  top: 20vh;
  height: 100%;
}

App.js file:

    <div className="App">
      <header className="App-header">
        <h2> </h2>
      </header>
      <body className="grid"> 
        <div className='map-box'> <Map /> </div>
        <div className='data-box'> <Data />  </div>
      </body>
    </div>
``

Upvotes: 1

Views: 1780

Answers (1)

Dvir Hazout
Dvir Hazout

Reputation: 261

It's a matter of css. Try giving the data-box style z-index of let's say 10.

Upvotes: 1

Related Questions