none
Autosuggest module box z-index RRS feed

  • Question

  • Any ways to set up autosuggest mogule's box z-index to be 0. I set up z-index of container to be 0, but its still always appear still above my dropdown menu , even menu has z-index 999999. any hidden styles autosuggest box may has?
    Thursday, December 22, 2016 10:39 PM

Answers

  • All DOM elements have a zIndex of 0 by default. As such, setting zIndex of 0 on the autosuggest container does nothing. You have to either add a zIndex greater than 0 to your asp:Menu or simply move the autosuggest container before the asp:Menu

    [Blog] [twitter] [LinkedIn]

    Friday, December 23, 2016 8:41 PM
  • Inspect the generated HTML of your application as something doesn't appear to be working as it should. There is no reason why you can't place an element over top of the autosuggest search box. When looking at the generated HTML code, check zIndices to ensure they are being applied. Also verify that the z-indices you are comparing are on the same level. As an example, look at this HTML:

    <div>
        <span style='zIndex:99'>span 1</span>
    </div>
    
    <span style='zIndex:1'>span 2</span>
    
    In this case if span one and two were positioned over top of each other, span 2 would be on top even though it has a lower zIndex of span one. The reason is that span 1 is in a div which is using the default z-index of 0 and that is what the browser is comparing two when deciding on which to render on top/bottom.


    [Blog] [twitter] [LinkedIn]

    Tuesday, January 3, 2017 11:27 PM

All replies

  • Can you provide a code sample that reproduces your issue. It isn't clear.

    [Blog] [twitter] [LinkedIn]

    Friday, December 23, 2016 8:13 AM
  •  <style>
    .main_menu
        {
           width:auto;
           background-color: #F26223;
           color:#FFFFFF;
           text-align: left;height: 45px;
           margin: 0px 10px 0px 5px;
           font-family: Verdana,Tahoma,Arial !important;
           font-size:15px;vertical-align:middle;
        }
              
        .level_menu
    
        {
            width: 200px;
            background-color: #434953;
            color: #FFFFFF;
            text-align: left;
            vertical-align:middle;
    	padding:10px 0 6px 5px;	
            height: 25px;
            line-height: 15px;
    	font-family: Verdana,Tahoma,Arial !important;
            font-size:14px;
    	margin:0 0 0 0px;border-bottom: 0px solid  #ACB3BF;
    	z-index: 999999999;
        }
      </style>  
    <script>
     function AutoSuggestAddresses() {
                Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
                    callback: onLoad,
                    errorCallback: onError,
                    credentials: VE_ClientToken
                });
                function onLoad() {
                   
                    var options1 = { maxResults: 1 };
                    var options2 = { maxResults: 5 };
                    var manager1 = new Microsoft.Maps.AutosuggestManager(options1);
                    var manager2 = new Microsoft.Maps.AutosuggestManager(options2);
                    manager1.attachAutosuggest('#txtTrackingAddress', '#searchBoxContainer', selectedSuggestion);
                    manager2.attachAutosuggest('#searchAddressBox', '#searchAddressBoxContainer', selectedSuggestion1);
                    $("#searchAddressBoxContainer").css("z-index", "0");
                    
                }
                function onError(message) {
    
                }
                function selectedSuggestion(suggestionResult) {
                    //                alert(
                    //                        'Suggestion: ' + suggestionResult.formattedSuggestion +
                    //                            '<br> Lat: ' + suggestionResult.location.latitude +
                    //                            '<br> Lon: ' + suggestionResult.location.longitude
                    //                            );
                }
    
                function selectedSuggestion1(suggestionResult) {
                    if (map == null) { GetMapForLocator(); };
                    map.setView({ bounds: suggestionResult.bestView });
                    var pushpinOptions = { icon: "Images/pushPins/bluestar.png" };
                    var pin = new Microsoft.Maps.Pushpin(suggestionResult.location, pushpinOptions);
                    pinFindLocationLayer.add(pin);
                }
    
            }
    </script>
    
    <asp:Menu ID="Menu" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" 
                StaticEnableDefaultPopOutImage="false"
                OnMenuItemDataBound="OnMenuItemDataBound"   
                staticdisplaylevels="1"
                staticsubmenuindent="0" 
                StaticSelectedStyle-CssClass="selectedmenuitem"  
                >
                <LevelMenuItemStyles>
                    <asp:MenuItemStyle CssClass="main_menu" />
                    <asp:MenuItemStyle CssClass="level_menu" />
                 </LevelMenuItemStyles>
                </asp:Menu>
    
    <div id = "searchAddressBoxContainer" style="margin: 5px 0px 20px 10px; z-index:0;">
                                        <div id="inputSearchAddress" style="margin: 5px 0px 5px 10px;">
                                                <input type="text" id="searchAddressBox"/>
                                                <div id="searchAddress"><img alt="search" width="16" height="16" src="jqwidgets/styles/images/search.png" /></div>
                                         </div>     
                                    </div> 
    Its asp.net page where menu in master page and autosuggest box in content page. if I type anything in autosuggest box and then hover over menu, level menu always behind autosuggest box and we prefer it to be on top.
    Thanks,

    Friday, December 23, 2016 8:22 PM
  • All DOM elements have a zIndex of 0 by default. As such, setting zIndex of 0 on the autosuggest container does nothing. You have to either add a zIndex greater than 0 to your asp:Menu or simply move the autosuggest container before the asp:Menu

    [Blog] [twitter] [LinkedIn]

    Friday, December 23, 2016 8:41 PM
  • as you can see in code above my menu level items has z-index: 999999999; Its not helping though. My menu resides in master page of asp.net.
    Tuesday, January 3, 2017 8:20 PM
  • Inspect the generated HTML of your application as something doesn't appear to be working as it should. There is no reason why you can't place an element over top of the autosuggest search box. When looking at the generated HTML code, check zIndices to ensure they are being applied. Also verify that the z-indices you are comparing are on the same level. As an example, look at this HTML:

    <div>
        <span style='zIndex:99'>span 1</span>
    </div>
    
    <span style='zIndex:1'>span 2</span>
    
    In this case if span one and two were positioned over top of each other, span 2 would be on top even though it has a lower zIndex of span one. The reason is that span 1 is in a div which is using the default z-index of 0 and that is what the browser is comparing two when deciding on which to render on top/bottom.


    [Blog] [twitter] [LinkedIn]

    Tuesday, January 3, 2017 11:27 PM