Autosuggest box appearing below other content RRS feed

  • Question

  • I am finally done porting my functionality to v8 and now I am trying to take advantage of some more new features like adding autosuggest to my web site.

    However, the autosuggest ui element is appearing under the map element which is a sibling of my input elements' parent.parent.parent. You can just see it peeking out the top of the map in the second screenshot.

    I am using the Ext.js framework for my UI so I have very little control over the resulting DOM.

    You can see from the first screenshot that my input (#geocode-inputEl) is within a table element which is within a div. I am using that div (#mapmenu-targetEl) for the container. I also tried using other divs up the chain for the container with similar results. Going all the way up to #map-panel put the suggest box at the bottom of the map and I only saw the top half of the first suggestion.

    I tried to find the DOM element that autosuggest creates so maybe I can hook into it and programmatically changes its zindex, but I can't seem to locate it in the DOM using Chrome. Can you tell me what it's id is?

    Or is there another way? Or am I SOL using Ext.js?

    Thanks, you have been very helpful and I hope I haven't been too much of a nag these last couple weeks.

    - Brad

    Thursday, September 21, 2017 12:15 AM


All replies

  • Use z-indexing on your HTML for the div's/textbox. Because this is higher in the page DOM than the map, it automatically renders below the map as they have the same z-index by default. Alternatively, also check the placement of your textbox if that is appearing below the map, then it's position is incorrect. 

    [Blog] [twitter] [LinkedIn]

    Thursday, September 21, 2017 12:29 AM
  • I am not sure I understand your suggestion. you mean using negative z-index to get them to appear below your autosuggest div? They already have no z-index so anything with a z-index will go above it. I was able to find the autosuggest DOM element div and it already has a z-index of 2000. I did play around and set various z-indexes all over the place with no joy. I even tried giving the autosuggest div a z-index of 200000.

    I then read up on z-index and found it is not nearly as simple as I thought.

    I think I am running into a problem with stacking contexts where the map is in a higher stacking context than my toolbar (there the address text box is) and thus the map will always be above the toolbar. But the the map and toolbar are in sibling divs, I tried changing their z-index to correct this but it did not work. I have not been able to track this down.

    I think I will table this for now.

    - Brad
    Thursday, September 21, 2017 6:19 PM
  • For your search box container, add a zIndex to it so that it will appear above the map. Alternatively check your css/html structure and find what in your app is causing this as this does not happen on its own. Here is a really basic sample:

    [Blog] [twitter] [LinkedIn]

    Friday, September 22, 2017 12:45 AM