How to fix dropdown menu position in Google map with React Js?

I have been trying to fix the position of a dropdown menu on my google-map, which is the top right corner just beside the fullscreen button. This what I currently have.

The above image looks fine if I'm using my own laptop to view the map. However, if I were to zoom in or out, or change using a desktop to view the map, the dropdown menu would either be behind the fullscreen button or far away from it.

This is when I zoomed-in.

This is when I zoomed-out or using a desktop to view the map.

I'm currently doing inline styling instead of using CSS or SCSS. This is the code that I'm using for the following:

Map.js

render() {          var left = 80 + 'px';          var bottom = 337 + 'px';          return (                <div className="animated fadeIn">                <div class="demo-solution demo-solution--flexbox">                            <img src={image} />                 <span>Normal</span>                 <img src={image2} />                 <span>Error</span>                 <img src={image3} />                 <span>Maintenance</span>              </div>                    <Row>                      <Col xs="12" md="12">                          <div style=>                              <GoogleMapReact                                  options={createMapOptions}                                  bootstrapURLKeys=                                  center={this.state.center}                                  zoom={this.state.zoom}                                  yesIWantToUseGoogleMapApiInternals                                  onGoogleApiLoaded={({ map, maps }) => this.handleApiLoaded(map, maps, this.state.sensor_data)}>                                  <div style= >                                      <Col xs="1" md="4">                                          <Input                                              type="select"                                              name="select_location"                                              value={this.state.select_location}                                              onChange={this.handleInputLocation}>                                              {this.createLocationItems()}                                          </Input>                                      </Col>                                  </div>                              </GoogleMapReact>                          </div>                      </Col>                  </Row>                </div>          )      }    }  

I have tried changing the position from relative to absolute but nothing has changed. I have also tried using margin or padding but it did not help to achieve what i wanted. Please help and thank you in advance!

https://stackoverflow.com/questions/65453148/how-to-fix-dropdown-menu-position-in-google-map-with-react-js December 26, 2020 at 10:05AM