reactjs - react-leaflet hides a drop down menu

Question

React-leaflet when i introduce a drop down menu at top, its hidden behind the map when i drop it down. Any help will be appreciated. Below is a screen shoot of how its rendering on my front

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css'
const position = [-0.29008, 3.81987]

class App extends Component {

  render() {
    return (
      <div>
<div className='form-row'>
                    <div className='form-group col-md-12'>
                        <Select
                            placeholder='Search a single Fleet'
                            options={[{ value: 'clear', label: 'Clear Search' }, ...options]}
                            key={'show'}
                            onChange={(e) => {
                                if (e.value === 'clear') setTheVehicle(undefined)
                                else setTheVehicle(e.value)
                            }}
                        />
                    </div>
                </div>


        <Map center={position} zoom={13}>
            <TileLayer
                        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
                        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    />
          <Marker position={this.state.center}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </Map>
      </div>
    );
  }
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement); 

标签： reactjsopenstreetmapreact-leaflet

Answer 1

Rather little lazy answer but took me ages : Check new style on first <div>

<div className='form-row' style={{position: 'relative', z-index: 999}}>
                    <div className='form-group col-md-12'>
                        <Select
                            placeholder='Search a single Fleet'
                            options={[{ value: 'clear', label: 'Clear Search' }, ...options]}
                            key={'show'}
                            onChange={(e) => {
                                if (e.value === 'clear') setTheVehicle(undefined)
                                else setTheVehicle(e.value)
                            }}
                        />
                    </div>
                </div>