How can I change the direction/location of the autosuggestion results?

Justin Evans 1 Reputation point

Hi there,

I've included the bing maps autosuggestion module in my website, which works perfectly. However, when the suggestion drop down box expands it goes down. I need to make it go up as the search bar itself is on the bottom of the page already.

I had a good browse for any options I could set but did not find any. I suspect that I will need to add CSS to redirect this but I am not sure what class/id i would be manipulating as neither #searchBox or #searchBoxContainer had the desired results.

Thankyou in advance, any help is appreciated!


Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
661 questions
{count} votes

1 answer

Sort by: Most helpful
  1. rbrundritt 16,466 Reputation points Microsoft Employee

    Doing some testing I found that I could achieve this using the following CSS:

       .as_container_search {  
       	transform: translateY(calc(-100% - 20px));  

    Note that this is modifying an internal CSS class of Bing Maps. The 20px may need to be adjusted to account for the height of your search box.

    Here is a fully working sample:

       <!DOCTYPE html>  
       <html lang="en">  
           <meta charset="utf-8" />  
           <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />  
           var map;  
           function GetMap() {  
               map = new Microsoft.Maps.Map('#myMap', {});  
               Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', function () {  
                   var manager = new Microsoft.Maps.AutosuggestManager({ map: map });  
                   manager.attachAutosuggest('#searchBox', '#searchBoxContainer', suggestionSelected);  
           function suggestionSelected(result) {  
               //Remove previously selected suggestions from the map.  
               //Show the suggestion as a pushpin and center map over it.  
               var pin = new Microsoft.Maps.Pushpin(result.location);  
               map.setView({ bounds: result.bestView });  
       	.as_container_search {  
       		transform: translateY(calc(-100% - 20px));  
           <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;background-color:gray"></div>  
           <div id='searchBoxContainer'>  
               <input type='text' id='searchBox' />  
       	<script type='text/javascript' src='<Your_Bing_Maps_Key>' async defer></script>  
    0 comments No comments