YUI autocomplete misalignment problem

Answer 1

Seems like this auto-complete plugin isn't using the infamous element position technique by quirksmode to find the real position of an element on the page.

Does the label need to be inline with the input box? You could very well fix this by either puttint a <br> after the label, or by actually setting a margin-left on the <div id="myContainer"> element.

Otherwise you should probably file this as a bug, and tell them to use quirksmode way of doing this (it's cross-browser).

Answer 2

This is not a bug, just a simple customization needed for specific design.

In case you are not using url's to add those js files, you just need to find the js code that generate table/div which populates your results. Code would be either generating whole table on fly, or would be setting an already hidden table/div 's visibility to 'visible'. If you find that code, you would just need to add an attribute to set its left position to match its 'px' position with you textbox.

Or else find what css class is being applied to that container of result, and try setting it left and absolute position.

Answer 3

AutoComplete doesn't automatically brute-force the position of your AC container every time it shows, because unless you're doing inline work this is unnecessary. However, now that you've moved your input field inline, you do need to take another step to align the container, either with custom CSS or brute force JS positioning.

Here's the brute force approach.

After you define your AC instance:

oAC.doBeforeExpandContainer = function() {
    var Dom = YAHOO.util.Dom;
    Dom.setXY("myContainer", [Dom.getX("myInput"), Dom.getY("myInput") + Dom.get("myInput").offsetHeight] );
    return true;
}

Here's a working example:

http://ericmiraglia.com/yui/demos/acalign.php

Answer 4

Hi! i had the same problem...

I wanted an inline YUI autocomplete so that i would place a label then a textbox with autocomplete without a line break. And i've found an answer: http://starikovs.com/2009/11/04/inline-yui-autocomplete-layout/. It's a CSS solution, there's no JavaScript.