I'm using Google's auto complete API. I'm also using a JQuery which animates the autocomplete field making it wider. However, the dropdown is not being positioned correctly when i have float right on the autocomplete field.
To test this type a letter then move the focus away from the field, then focus on the field again, you will see that the field and the dropdown get wider, but in 2 different directions.
(Note: it works with float:left, but I want to use float right for this)
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="http://ift.tt/1fgkMjW">
<script src="http://ift.tt/1LzLlDy"></script>
<script src="http://ift.tt/eSWUvL" type="text/javascript"></script>
<script>
function initialize() {
autocomplete = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */(document.getElementById('autocomplete')));
$('#autocomplete').focus(function() {
$(this).attr('data-default', $(this).width());
$(this).animate({ width: 315 }, 'slow');
$('.pac-container').animate({ width: 315 }, 'slow');
}).blur(function() {
var w = 150;
$(this).animate({ width: w }, 'slow');
$('.pac-container').animate({ width: w }, 'slow');
});
}
</script>
<style>
#autocomplete {
position: absolute;
top: 0px;
margin-right:300px;
right: 0px;
width: 150px;
float:right;
}
</style>
</head>
<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire