react-places-autocomplete 下推其他组件

Question

我一直在努力解决这个问题。使用最新的 README.md githun repo 中给出的相同示例正在推送下面的其他组件，这并不是更好的用户体验。我在下面包含了一个简单的文本字段来演示这一点。还尝试将位置用作绝对位置，但没有用。react-places-autocomplete 使用我用于地点建议的 google maps javascript API没有地方建议下拉菜单带有地方建议的图片按下下面的文本字段

Answer 1

您需要为自动完成容器提供绝对和 z-index 样式

添加这个CSS -

.autocomplete-dropdown-container{

   position: "absolute";

   z-index: 1000;

}

编辑：我使用的 css 有效-

.location-search-input,

.location-search-input:focus,

.location-search-input:active {

  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);

  border: honeydew;

  display: block;

  width: 100%;

  padding: 16px;

  font-size: 16px;

  border-radius: 2px;

  outline: none;

}

.autocomplete-dropdown-container {

  border-bottom: honeydew;

  border-left: honeydew;

  border-right: honeydew;

  border-top: 1px solid #e6e6e6;

  box-shadow: 0 2px 4px rgba(0,0,0,0.2);

  position: absolute;

  z-index: 1000;

  border-radius: 0 0 2px 2px;

}

Answer 2

您可以尝试将其绝对定位 - 如下所示：

styles={{

  listView:{

    position: 'absolute',

    backgroundColor: '#FFF',

    zIndex: 10,//Forcing it to front

  }

}}

Answer 3

您需要设置绝对位置和 zIndex

className="autocomplete-dropdown-container"

 styles={{

   listView:{

    position: 'absolute',

    backgroundColor: 'white',

    zIndex: 2,

   }

 }}>