1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    56
    Vote Rating
    0
    donalconlon is on a distinguished road

      0  

    Default YUI autocomplete goes behind the grid.

    YUI autocomplete goes behind the grid.


    HI there.

    I have a grid, with a YUI autocomplete text box just above it. When the search container displays, it seems it's z-index is lower than that of the grid, i.e. it appears behind the grid.

    Any clues?

    This is what I have:

    Code:
    <div id='ysearchautocomplete'>
    			<input name='ysearchinput' type='text'/>
    			<div id='ysearchcontainer'></div>
    </div>
    Code:
    #ysearchmod {position:relative;padding:1em;}
    #ysearchautocomplete {position:relative;margin:0em;width:50%;border:solid red 0}
    #ysearchinput {width:100px;height:1.4em;}
    #ysearchcontainer {top:2em;width:100%;font-size:8pt;font-family:tahoma}
    #ysearchcontainer .yui-ac-content {position:absolute;width:600px;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
    #ysearchcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
    #ysearchcontainer ul {padding:0px;width:100%;margin:0px}
    #ysearchcontainer li {padding:0 5px;cursor:default;white-space:nowrap;width:100%}
    #ysearchcontainer li.yui-ac-highlight {background:#FFF9D2;}

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    I think there's a thread about this somewhere - YUI uses some very low z-index numbers as opposed to yui-ext which in a lot of cases starts up at 10000. You should be able to just kick the z-index of the autocomplete up higher.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    56
    Vote Rating
    0
    donalconlon is on a distinguished road

      0  

    Default


    quick response!

    I was trying that, with

    Code:
    #ysearchcontainer .yui-ac-content {position:absolute;width:600px;border:1px solid #404040;background:#fff;overflow:hidden;z-index:9050;}
    #ysearchcontainer .yui-ac-shadow {position:absolute;margin:.3em;width:100%;background:#a0a0a0;z-index:9049;}
    But no joy. I did search, and found many references to z-index, but nothing helped. Of course me being an is probably not helping...

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Oh, so the input box becomes a dropdown that overlays the grid? This an IE 'feature'. This is the reason that yui-ext can build a iframe shim behind a dialog to keep underlying input elements from bleeding thru. I'm not sure if this is built in to the grid or maybe gridview. Hopefully somebody else will chime in here.

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    56
    Vote Rating
    0
    donalconlon is on a distinguished road

      0  

    Default


    Yup.

    The search results appear behind the grid ala:


  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Can u post some of your code that builds/populates the autocomplete. I don't have any code built that does that. I add it to one of my grid samples and play with it.

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    56
    Vote Rating
    0
    donalconlon is on a distinguished road

      0  

    Default


    Thanks Tim. Appreciate your help.
    I point the datasource to a server script that generates xml.

    autocomplete.js

    Code:
    function TowerIDAutoComplete(inputField, ySearchContainer)
    {
    	var myServer = "/listquery.aspx";
    	var mySchema = ["z:row", "ows_Title"];
    	var oACDS = new YAHOO.widget.DS_XHR(myServer, mySchema);
    
    	oACDS.responseType = oACDS.TYPE_XML;
    	oACDS.scriptQueryAppend="list=directors%20and%20higher&keyField=Title";
    	
    	var myAutoComp = new YAHOO.widget.AutoComplete(inputField,ySearchContainer, oACDS);
    
    	myAutoComp.minQueryLength = 1;
    	myAutoComp.typeAhead = true;
    	myAutoComp.useIFrame = true;
    	myAutoComp.maxResultsDisplayed = 20;
    	
    	myAutoComp.formatResult=function(aResultItem,sQuery){ 
    		var sKey = aResultItem[0];
    		var sKeyQuery = sKey.substr(0,sQuery.length);
    		var sKeyRemainder=sKey.substr(sQuery.length);
    		
    		var aMarkup = ["<div id ='ysearchresult'>",
    		"<span style='font-weight:normal'>",
    		sKey,
    		"</span>",
    		"</div>"];
    		
    		return (aMarkup.join(""));
    		
    		}
    
    }
    Page:
    Code:
    <script src='/yui/yahoo.js'></script>
    <script src='/yui/dom.js'></script>
    <script src='/yui/event.js'></script>
    <script src='/yui/connection.js'></script>
    <script src='/yui/autocomplete.js'></script>
    
    <div id='ysearchautocomplete'>
             <input name='ysearchinput' type='text'/>
             <div id='ysearchcontainer'></div>
    </div> 
    
    <script language='javascript'>TowerIDAutoComplete('ysearchinput','ysearchcontainer');</script>
    Sample xml:
    Code:
    <root>
    <z:row ows_ID="55" ows_Title="Rebecca DeMoss"/>
    <z:row ows_ID="55" ows_Title="Jake DeMoss"/>
    <z:row ows_ID="55" ows_Title="Frank DeMoss"/>
    <z:row ows_ID="55" ows_Title="Louise Rosa"/>
    </root>

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Haven't got my sample to work yet - I'll get back to this in the morning. In the meantime can you try bumping the AC z-index higher - above the grid - say 11000.

  9. #9
    Ext User
    Join Date
    Mar 2007
    Posts
    18
    Vote Rating
    0
    chidera is on a distinguished road

      0  

    Default


    Hi,

    I've been having similar problems with the YUI Menu and with the YUI-Ext Grid. I've jacked the menu z-index up through the roof (up to 5,000,000...!) and haven't had any luck. My guess is that there's something else that I need to set that attribute for, but don't know what it is.

    Here is the latest code I've tried with my menu:
    Code:
    	<script>
    		onMenuAvailable = function(p_oEvent) {
    			// Instantiate and render the menu
    			var oMenu = new YAHOO.widget.Menu(
    				"mainMenu",
    				{
    					position:"static",
    					showdelay:250,
    					hidedelay:0,
    					lazyload:true,
    					zIndex:5000000
    				}
    			);
    			oMenu.render();
    		}
    
    		// Initialize and render the menu when it is available in the DOM
    		YAHOO.util.Event.onAvailable("mainMenu", onMenuAvailable);
    	</script>
    I'm thinking that this is related, but if people don't think that it is, let me know and I'll re-post this elsewhere.

    Thanks,

    Travis

  10. #10
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    You will need to make sure your menu or autocomplete element is rendered into a container that has a z-index higher than the grid's container. Generally this is achieved by rendering them to the document body and bumping the z-index.

Similar Threads

  1. Doubts about autocomplete and YUI-Ext
    By franklt69 in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 13 Feb 2007, 6:26 AM
  2. YUI Autocomplete clipped in BorderLayout
    By jhericks in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 26 Jan 2007, 9:39 AM
  3. Grid autocomplete editor
    By psyberdyne in forum Community Discussion
    Replies: 0
    Last Post: 17 Nov 2006, 10:47 AM
  4. BasicDialog with Autocomplete Box
    By brant in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 10 Nov 2006, 2:56 AM

Thread Participants: 6