hibiken / react-places-autocomplete

React component for Google Maps Places Autocomplete
https://hibiken.github.io/react-places-autocomplete/
MIT License
1.38k stars 388 forks source link

How to set the width of the suggestion container to 100% ? #372

Closed dhanushkumarsivaji closed 3 years ago

dhanushkumarsivaji commented 3 years ago

Hi, I have added react-places-autocomplete in one of my apps. For desktop, I can able to set the width in px. For mobile, there are different resolutions. So I am trying to set its width to 100% but it's not taking the value. Here i am sharing the image of how it looks like on mobile.

width

code:

JS

<PlacesAutocomplete
        value={address}
        onChange={setAddress}
        onSelect={handleSelect}
        debounce={1000}
      >
        {({ getInputProps, suggestions, getSuggestionItemProps }) => (
            <div className="search-container">
              <Search
                {...getInputProps({ placeholder: 'Enter Address' })}
                type="text"
                loading={loading}
              />
            <div className="suggestion-container" >
              {suggestions.map((suggestion) => {
                const style = {
                  backgroundColor: suggestion.active ? '#dde2e4' : '#fff',
                };

                return (
                  <div
                    className="input-suggestion"
                    {...getSuggestionItemProps(suggestion, { style })}
                  >
                    {suggestion.description}
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </PlacesAutocomplete>

CSS

.search-container{
    width: 800px;
    margin-left: 20px;
}
.input-suggestion{
    width: 800px;
    height: 60px;
    border: 1px black dotted;
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 24px;
    padding: 12px 40px 12px 12px;
  }

  .suggestion-container {
    position: absolute;
    z-index: 1000;
  }

  @media (max-width: 768px) {
    .search-container{
      margin-left: 0px;
      width: inherit;
  }
    .suggestion-container {
      width: inherit;
    }

  .input-suggestion{
      width: 100%;
      padding: 12px;
    }

  }

Help me to fix this. I am not able to inspect this too. If i click something the suggestion container is hidden.