首页 文章

JavaScript / SASS：如何根据输入字段的宽度覆盖Google Maps API v3自动完成下拉列表的默认宽度？

提问于
浏览 次
0

我有一个问题，自动完成下拉列表（div类与“pac-container”）总是比输入字段右侧的4个像素短 . 如下所示：

Google Maps API v3 Autocomplete

这是HTML：

<input id="autocomplete" size="50" placeholder="Enter your address" type="text"></input>

和JavaScript：

function initialize() {
  var options = {componentRestrictions: {country: 'uk'}, types: ['geocode']}
  new google.maps.places.Autocomplete((document.getElementById('autocomplete')), options);
}

initialize();

这是JSFiddle代码段：http://jsfiddle.net/GVdK6/524/

Google Maps API会自动计算此宽度，并通过内联样式将其应用于下拉列表 . 我希望它具有相同的宽度并与输入字段对齐 . 输入字段的宽度可以根据size属性而变化，因此使用！important规则将pac容器的宽度设置为CSS中的固定值不起作用 . 任何帮助将不胜感激，谢谢！

javascript css google-maps google-maps-api-3 sass

1 回答

  • 1

    尝试将box-sizing更改为pac-container到content-box

    .pac-container {
  box-sizing: content-box;
  padding-right: 4px;
}

    http://jsfiddle.net/bzx7dk2o/

    回复于

相关问题