How to set the width of the suggestion container to 100% ?
dhanushkumarsivaji opened this issue · comments
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.
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.