"Enhancing user experience by implementing Google Places Auto Complete feature that dynamically adjusts input

I have encountered an issue while using the react-places-autocomplete package.

Every time I type something into the input field and suggestions appear, the entire input field jumps up, which disrupts the overall appearance.

Is there a way to prevent the input field from moving and simply have the suggestions dropdown normally? I have attempted to add a style of position: relative and top: Npx to the suggestions, but it doesn't prevent the input field from moving.

Searchbar.js

 return (
    <div className="search">
      <PlacesAutocomplete
        value={locationChars}
        onSelect={handleSelect}
        searchOptions={{ types: ["(cities)"] }}
        onChange={handleChange}
      >
        {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
          <div>
            <input
              ref={inputRef}
              {...getInputProps({ placeholder: "Search Location" })}
              className="search-input"
            />
            <div className="suggestions-container">
              {loading ? <div>Loading...</div> : null}
              {suggestions.map((suggestion) => {
                const style = {
                  backgroundColor: suggestion.active ? "#41b6e6" : "white",
                };
                return (
                  <div {...getSuggestionItemProps(suggestion, { style })}>
                    {suggestion.description}
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </PlacesAutocomplete>
      <SearchIcon className="search-icon" />
    </div>

Searchbar.css

.search {
  display: flex;
  flex: 1;
  align-items: center;
  border-radius: 24px;
  background-color: purple;
  margin-right: 1rem;
  color: black;
  opacity: 1 !important;
}

.search-input {
  height: 12px;
  padding: 10px;
  border: none;
  width: 100%;
}

.search-icon {
  padding: 5px;
  height: 22px !important;
  background-color: blue;
}

.suggestions-container 
}

https://i.sstatic.net/3MuHT.png

https://i.sstatic.net/QLrYu.png

Answer №1

Perhaps considering action with the suggestions-container class could be beneficial. I came across react-google-autocomplete and found it to provide a seamless experience. Keep coding happily!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An easy CSS conundrum when hovering

Looking for some assistance with CSS. I want to display the text "Featured Page" with a picture appearing on the right side upon hovering (mouseover). Currently, the picture shows up under the text using the following CSS, but I need it to be larger and pl ...

When the cursor hovers over an item, I would like to enlarge its width while simultaneously shrinking the width of two additional items

Here is a section that I have created, you can view the mockup here. The section is divided into 3 parts, each taking up around 33.3% of the width and floated. My goal is to make it so that when a specific element, like .col-one in my example, is hovered ...

Adding a gradient overlay to an image that has a see-through background

I am trying to achieve a unique effect where a gradient appears on the text instead of the background of an image. An example I created can be found here: https://codepen.io/BenSagiStuff/pen/BaYKbNj body{ background: black; } img{ padding: 30px; ...

Dropdown menu remains unable to open

One of the dropdown menus on my website is not retracting back properly, but only on the contact page where a Google map is displayed. The issue looks like this: I've tried tweaking the CSS code without success. What could I be missing? Should I prov ...

Arranging blocks within blocks? Placing additional text underneath a block

Looking to append some text at the end of a block called .label. Inside this block, there is a sub-element called .label_title, and below that is a picture/link enclosed in another block. Under the picture/link, I wish to include a short description while ...

How can we display a different navbar based on whether the user is logged in or not?

Can anyone share the most effective methods for displaying a different navbar based on whether or not a user is logged in? I have considered a few approaches: One option might involve creating two separate navbars in the HTML file and using CSS to tog ...

Group in group, glitch in outdated browser

Facing an issue with IE6 while writing HTML/CSS code. I am looking to create dynamic divs using classes: Here is a simple example (not real-project code): .top {width: 50px;} .top.selected {background: #f00;} .mid {width: 114px;} .mid.selected {backgrou ...

Activate a .click() event on a hyperlink exclusively in mobile view

Currently, I am working on a WordPress website that utilizes a Table of Contents plugin. The plugin simply identifies headings and adds them to the table of contents. I am aiming to achieve a specific functionality on my website (). When the window width ...

"Pressing the 'back' button on your browser takes

Is there a way to navigate back to the main page by clicking on an image? After selecting First, Picture1 will be shown. How can I go back to the selection page for further choices? <a href="picture1.jpg"> <h3>First</h3></a> <a ...

The "date" field seems to be malfunctioning on iOS devices exclusively

I'm having issues with a simple HTML CSS form that includes an input type="date" field which is not working on iOS devices. <fieldset class="form-group border p-3"> <div class="row mx-auto"> <legend class=" ...

What is the best way to transfer data from a server component to a client component in a Next.js 14 application router?

Looking for a way to transfer data from the server component to the client component in Next.js 13 app router? In my page.tsx file, I am making a call to an external API that retrieves the city of the person. Now, I need to pass this city data to the clie ...

Using Javascript to display an element when scrolling within a specific container and each item of an array reaches the top

I'm just starting out with JavaScript and I'm attempting to create a scrollable div that includes items from an array. As the user scrolls and each item reaches the top, I want a hidden element to be displayed. Here's what I have so far: ...

Tips for consolidating multiple projects under one domain without incurring any additional costs

Good morning! In my quest to host multiple projects on a single domain, specifically xyz.com, I am faced with a dilemma. I have an outdated personal developer portfolio created with React, and a newer software built with Vue.js that I would like to use fo ...

When bootstrap is imported, SVG is displayed with a square background

The combination of reactJS and bootstrap has caused an unexpected issue for me. After importing bootstrap, strange squares have started to appear behind my SVG images... https://i.sstatic.net/4vmP8.png Is anyone familiar with what is causing this and ho ...

What is the best way to customize the CSS of the Skype contact me button?

I am struggling with customizing the Skype contact me button. The standard Skype button has a margin of 24px and vertical-align set to -30px. I have tried removing these styles but have had no success. Here is the code snippet I am working with: Skype ...

Creating a unique Bootstrap background design

I have recently started using bootstrap and I am facing an issue. I want to change the background of a container when hovering over it, but I am having trouble getting it right. HTML <div class="container bg-black h-25 w-25 box"></div&g ...

Adjust the translateX value and element size based on either the parent element's size or the window's dimensions

Is this question specific enough to relate to others' problems? My issue involves two elements, a child and a parent, with the child element rotating around the parent using CSS animations. <div class="planet"> <div class="moon"></di ...

Creating a Custom Select Option Component with Ant Design Library

Is it possible to customize options in an antd select component? I have been trying to render checkboxes alongside each option, but I am only seeing the default options. Below are my 'CustomSelect' and 'CustomOption' components: // Cu ...

Stop the text from wrapping to the full width of its parent when it overflows onto the following line

When I shrink the width in responsive design, the text overflows to the next line and the text wrapper expands to fit the parent container. Is there a way to prevent this behavior so that it looks like the red container? I could add padding to the contain ...

The Bootstrap 4 card component is a versatile and stylish

Currently working on a display layout using Bootstrap 4, specifically utilizing cards. The issue I'm facing is that the text exceeds the limit of the card, causing it to overflow. Is there a solution to make the text automatically wrap to the bottom ...