Home/ Questions/Q 7162817
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T13:47:52+00:00

I am using YUI layout and autocomplete in the same page. The problem is

  • 0

I am using YUI layout and autocomplete in the same page. The problem is that autocomplete field dropdown goes behind the layout.
I think the problem is with z-order but couldn’t find it after a bit of research.

Here is the simplified piece of code I have, just copy it to html file and it should work (enter letter a for example to see the problem):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />


<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/autocomplete/assets/skins/sam/autocomplete.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/layout.css">

<link rel="stylesheet" type="text/css" href="main.css"></link>

<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/layout/layout-min.js"></script>



<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/autocomplete/autocomplete-min.js"></script>

</head>

<body class="yui-skin-sam">

<div id="header" >

<div class="header2">
    <span class="right-float topPad4px" id="myAutoComplete">
        <input class="searchInput" id="searchInput" type="text" size="25" value=""/>
        <div id="results"></div> 
        <input id="myHidden" type="hidden"> 
    </span>
</div>

</div>

<div class="mainArea">
    <div id="tree" class="tree" style="margin-left :20px">
    </div>
    <div id="center" class="centerDiv">
    </div>
</div>

<script>

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;

    Event.onDOMReady(function() {
        var layout = new YAHOO.widget.Layout({
            units: [
                { position: 'top', height: 40, body: 'header', gutter: '0px'},
                { position: 'left', width: 280, resize: true, body: 'tree', scroll: true, animate: false },
                { position: 'center', body: 'center', scroll: true }
            ]
        });

        layout.render();

        Event.on('tLeft', 'click', function(ev) {
            Event.stopEvent(ev);
            layout.getUnitByPosition('left').toggle();
        });   
    });
})();

var ds = new YAHOO.util.LocalDataSource(["apples", "apricots", "bananas"]);


var ac = new YAHOO.widget.AutoComplete("searchInput", "results", ds);

</script>

</body>
</html>

my question is – what do I need to modify for the autocomplete dropdown to appear on top of layout?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, found the answer on yui forum, basically I need to add bold items:

    { position: ‘top’, height: 28, body: ‘top1’, scroll: null, zIndex: 2 },

    see http://developer.yahoo.com/yui/examples/layout/menu_layout.html for more details in the “Fixing the hidden Menus” section.

    • 0