autocompleter result list shifted to left !

12 views
Skip to first unread message

Sabri LABBENE

unread,
Apr 29, 2009, 9:42:30 AM4/29/09
to prototype-s...@googlegroups.com
Hi all,
I'm using prototype-1.6.1_rc2 with scriptaculous-1.8.0. I have an autocompletion feature in my application.
Autocompleter goes to LDAP gather usernames.
I also have the possibility to enter in the textfield many users separated by ',' or ';'.

The problem I'm facing happens with IE7 and IE6:
The list of choices proposed by autocompleter ajax response is shifted to the left proportionally to the amount of names already entered in the text field.
When I enter too many names, the list become not visible (out of screen).
This is annoying for users.

Can anyone tell how to fix this? From where the problem is coming ?

Thanks for your help.

Best Regards,
-- Sabri.


Sabri LABBENE

unread,
Apr 29, 2009, 5:08:29 PM4/29/09
to prototype-s...@googlegroups.com
Hi all,
Nobody had this problem before ??
Is there some attribute that scriptaculous should set for the div that will contain the result of the ajax query

G. Sharon Yang

unread,
Apr 29, 2009, 6:51:48 PM4/29/09
to prototype-s...@googlegroups.com
my autocompleters are fine with IE 6 and IE 7, but in IE 8, the
autocomplete fields shift to the right side, :(( since most of our
customers use IE 6 and IE 7, I just leave the bug as it it for
now.....

-S.

Sabri LABBENE

unread,
May 5, 2009, 7:49:18 AM5/5/09
to prototype-s...@googlegroups.com
Hi,
I still can't fix autocomplete div position!!
I tried to apply the same css rules as in the advanced autocompletor demo [1] but it changed nothing. The div to populate still shifted to left as much as I enter data in the input field.

This is my original code:
here is my autocomplete div code:
   var update = Builder.node('div', {
          'id':    'user_search_choices',
          'class': 'searchAsYouType'});
   Element.hide(update);
   document.body.appendChild(update);

And here is the applied css:
/* {{{ searchAsYouType */
.searchAsYouType {
    background:white;
}
.searchAsYouType ul {
    margin: 0;
    padding: 0;
    list-style:none;
}
.searchAsYouType ul li.selected {
    background:#eef;
}
/* }}}*/

Finally, here is my input field html code:
<input type="text" name="add_cc" id="tracker_cc" size="30">

So, can someone tell if there is something wrong or missing ?

[1]: http://www.rorcraft.com/autocomplete_advanced_local/

Thanks for your help.

With best regards,
-- Sabri LABBENE.

G. Sharon Yang

unread,
May 5, 2009, 1:27:27 PM5/5/09
to prototype-s...@googlegroups.com
I tried your example in IE 8, it's fine. No left or right shift issue.

I would try the whole css list from scriptaculous. I would also try
fixed, relative in the position box and also try inline instead of box
in the display just to test the behavior.

.searchAsYouType {
position:relative;
width:250px;
background-color:white;
border:1px solid #888;
margin:0;
padding:0;
}
.searchAsYouType ul {
list-style-type:none;
margin:0;
padding:0;
}
.searchAsYouType ul li.selected { background-color: #ffb;}
.searchAsYouType ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
height:16px;
cursor:pointer;
Reply all
Reply to author
Forward
0 new messages