Using BGIFRAME in IE6 with YUI Autocomplete

Question

I am writing a simple HTML code which uses YUI autocomplete (to display suggestion as you type like Google). But a <select> block is getting displayed over the suggestions list in IE6 only.

It is working fine in other browsers.

I used bgiframe to avoid it because of z-index bug in IE6 but had no luck.

My simple code is here:

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/autocomplete-min.js"></script>

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.js"></script>

<script type="text/javascript" charset="utf-8">
    $(function() {
        $('#myContainer').bgiframe();
    });
</script>

<style type="text/css">
    #myAutoComplete {
        width:25em; /* set width here or else widget will expand to fit its container */
        padding-bottom:2em;
    }
</style>
</head>
<body>
    <h1>Autocomplete using YUI !</h1>
    <label for="myInput">Search names in our database:</label>
    <div id="myAutoComplete" class="yui-skin-sam">
        <input id="myInput" type="text">
        <div id="myContainer"></div>
    </div>
    <br>
    <div>   
        <form action="#" method="get" accept-charset="utf-8">
            <select>
                <option value="val1">val1</option>
                <option value="val2">val2</option>
            </select>
        </form>
    </div>
</body>

Here select is displayed over myContainer (myContainer displays populated suggestions). I know I am making some blunder. Please help me to figure it out.

score 2 · Answer 1 · answered Apr 13 '11 at 13:46

2

One thing you can do is hide the <select> (use visibility:hidden as not to mess up the layout) at the beginning of the process and show it at the end.

BTW: The likelihood of finding another StackOverflow user using YUI + jQuery + bgiframe + ie6 is quite low. Most users like to help with debugging code, not plug-ins.

answered Apr 13 '11 at 13:46

Diodeus - James MacFarlane

112,730
33
157
176

Thanks Diodeus. I don't want to hide it thats why I am using bgiframe. I know probabity is low but still I am optimistic as its pissing me off and deadlines are really close. – Ajinkya Apr 13 '11 at 13:51

andyb · Accepted Answer · 2011-04-14T11:50:56.203

jQuery and YUI live in separate namespaces so there shouldn't theoretically be a problem. Are you sure there are no JavaScript errors? Are all the libraries loaded correctly?

Could use jQuery autocomplete instead?

Edit: You can configure the YUI autocomplete to use an iFrame! It kind of works in that it does hide the <select> but not instantly. This is probably the best solution since it does not needs jQuery or bgiframe.

Edit 2: I was not happy with the speed at which the <iframe> was created by YUI so came up with this hack! Here is a complete solution that seems to work in IE6 for me. THe problem is that YUI is in control of the #myContainer which seems to break the bgiframe that jQuery sets up. So I opted to simply manipulate the height of #myContainer with the YUI method hooks. You may need to change this value to fit your layout, but I'm hoping it will work for you.

Sorry the CSS alteration is jQuery. I have never used YUI before and haven't got any idea how to change CSS properties in YUI :-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        #myAutoComplete {
            width:15em; /* set width here or else widget will expand to fit its container */
            padding-bottom:2em;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/assets/skins/sam/autocomplete.css" />
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/connection/connection-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/autocomplete-min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.bgiframe.min.js"></script>
</head>
<body class="yui-skin-sam">
    <div id="myAutoComplete">
        <label for="myInput">Enter a state:</label><br/>
        <input id="myInput" type="text"/>
        <div id="myContainer"></div>
    </div>
    <div>
        <form action="#" method="get" accept-charset="utf-8">
            <p>
                <select>
                    <option value="val1">val1</option>
                    <option value="val2">val2</option>
                </select>
            </p>
        </form>
    </div>
    <script type="text/javascript">
        $(function() {
            $('#myContainer').bgiframe();
        });

        YAHOO.example.Data = {
            arrayStates: [
                'Alabama',
                'Alaska',
                'Arizona',
                'Arkansas',
                'New Hampshire',
                'New Jersey',
                'New Mexico',
                'New York',
                'Wyoming'
            ]
        }

        YAHOO.example.BasicLocal = function() {
            var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates);
            var restoreHeight = function(sType, aArgs) {
                $('#myContainer').css({height:'auto'});
            };

            // Instantiate the AutoComplete
            var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
            oAC.prehighlightClassName = "yui-ac-prehighlight";
         //   oAC.useIFrame = true; // works but changes the container into an iFrame a bit too late for my liking
            oAC.doBeforeExpandContainer = function () {
                $('#myContainer').css({height:'50px'}); // might need to play around with this value
                return true;
            }
            // restore height
            oAC.containerCollapseEvent.subscribe(restoreHeight);
            oAC.useShadow = true;

            return {
                oDS: oDS,
                oAC: oAC
            };
        }();
    </script>
</body>
</html>

I cant use jquery right now :( I checked and don't think there are any script error / conflict. — Ajinkya, Apr 14 '11 at 05:49
Um, well you are using jQuery for the "bgiframe" that's why I asked :-) I have updated my answer with something that works although it might not be the nicest UX. — andyb, Apr 14 '11 at 09:06
Heh, looks like I stitched myself up on this one since it was me who recommended bgiframe in the first place when I answered your [other question](http://stackoverflow.com/questions/5621220/how-to-display-one-div-over-another-div-in-ie6)! — andyb, Apr 18 '11 at 07:53

Using BGIFRAME in IE6 with YUI Autocomplete

2 Answers2