Posted by stBorchert on November 6, 2009 at 10:47am
16 followers
| Project: | Drupal core |
| Version: | 6.x-dev |
| Component: | markup |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | needs work |
Issue Summary
Hey.
While working on a module I noticed that the autocomplete popup isn't positioned correctly always.
If the text field isn't placed at the left side of a container the popup won't be displayed attached to it.
I could reproduce this in Firefox, Safari and Chrome but not IE6 (all Windows XP). This affects Drupal 6 also.
If I change function populatePopup in autocomplete.js it works in all browsers noted above but not in IE6:
$(this.popup).css({
left: this.input.offsetLeft + 'px',
top: this.input.offsetTop + 'px',
marginTop: this.input.offsetHeight + 'px',
width: (this.input.offsetWidth - 4) + 'px',
display: 'none'
});| Attachment | Size | Status | Test result | Operations |
|---|---|---|---|---|
| d7_autocomplete_position_ff.png | 4.9 KB | Ignored: Check issue status. | None | None |
| d7_autocomplete_position_ie.png | 4.36 KB | Ignored: Check issue status. | None | None |
Comments
#1
This works only if the autocomplete field is not positioned directly at the left bottom...
if($.browser.msie == true && $.browser.version.substr(0,1) == 6){$(this.popup).css({
position: 'absolute',
left: this.input.offsetLeft + 'px',
top: this.input.offsetTop + 84 + 'px',
width: (this.input.offsetWidth - 4) + 'px',
display: 'none'
});
}
else {
$(this.popup).css({
position: 'absolute',
left: this.input.offsetLeft + 'px',
top: this.input.offsetTop + 22 + 'px',
width: (this.input.offsetWidth - 4) + 'px',
display: 'none'
});
}
#2
This code will fix it and make it work in all browsers I can test here (WinXP: IE6, Firefox 3.5, Safari, Chrome):
$(this.popup).css({marginTop: this.input.offsetHeight + 'px',
width: (this.input.offsetWidth - 4) + 'px',
display: 'none'
});
if (!$.browser.msie && $.browser.version.substr(0, 1) != '6')
{
$(this.popup).css({
left: this.input.offsetLeft + 'px',
top: this.input.offsetTop + 'px'
});
}
I will create a patch later today based on the code above.
#3
Created a patch based on the code above (with minor modification).
Attached are screenshot of the current and the patched behavior.
#4
I detected this bug also in IE8, so I changed the patch a little.
I tested the patch on IE6, IE7, IE8, Chrome 3 and FF 3.5 and it is working fine.
#5
+++ misc/autocomplete.js 2009-11-26 23:45:40.875000000 +0000@@ -184,6 +184,12 @@ Drupal.jsAC.prototype.populatePopup = fu
+ if (!($.browser.msie && $.browser.version.substr(0, 1) < '8')) {
If the problem exists in IE8 this should be
<= 8.#6
the if condition excludes the browsers that do not have this issue, so the value can not be equal to 8.
#7
#4: 625170_autocomplete-popup-position_4.patch queued for re-testing.
#8
The patch solves the trouble I had with the positioning. Thanks!
#9
@NiklasBr: care to mark as RTBC? Thanks.
#10
Sure. But I am not a core contributor… Hope that is ok.
#11
Can't you do it without browser detection?
#12
Yes, but we need to set input.form-autocomplete position to relative, so IE6/7 get the offsetTop and offsetLeft right.
#13
Hey.
Thanks for pushing this.
Unfortunately the popup isn't correctly positioned in IE7 (screen captures taken from IE7 on vista in a virtual machine).
Firefox, Safari, Chrome, IE6 and IE8 are behaving as expected (as far as I can tell).
You can retest the behavior by using the module MPAC.
#14
I believe this is the issue with IE7: http://bit.ly/9ZsqJl
Forcing the hasLayout on div#page resolves this issue for Seven theme, but it's better to rely only on autocomplete.js to get the position right.
Since the popup is always within the same containing DOM element as the autocomplete input, we can use jQuery's position().
#15
Looking good. Also added correct width.
#16
For what it's worth, I've implemented the patch in #15 on my live 6.17 installation. (I ignored the line that says
this.popup = $('<div id="autocomplete"></div>')[0];because I'm assuming that's D7)The result: it works! Tested in FF3, Safari and Chrome and IE6 (all Win XP). (All I wanted is to display the forms inline with their labels and that created problems with autocomple positioning.) But there's a small hickup in IE6: if you have another form underneath the autompleting one that is a select form, then the list of autocomplete suggestions appears underneath that other select form. I don't know if I should add a z-index or overflow css somewhere of not.
Other than that, just letting you know that the patch in #15 seems to work for D6.17 . I didn't test any other patches here.
It would be nice to have a solution to this included in the future D6.x releases too, cause I think many people will stick with D6 for another 2 years.
#17
#15 is RTBC
#18
Badly needed.
+++ misc/autocomplete.js 16 Jun 2010 11:16:47 -0000@@ -172,6 +172,8 @@
+ var input = $(this.input);
The variable name should be $input, if it is a jQuery object.
So, position is correct, but input is not.
+++ misc/autocomplete.js 16 Jun 2010 11:16:47 -0000@@ -180,11 +182,12 @@
this.popup = $('<div id="autocomplete"></div>')[0];
So does #autocomplete already receive position:absolute and it's parent container position:relative ?
Powered by Dreditor.
#19
I applied the patch in #15 manually to Drupal 6.19 and it works.
The code inside
Drupal.jsAC.prototype.populatePopup = function () {is sligthtly different in Drupal 6.19 so I had to make the changes from the patch manually, but it works so this should also be commited to Drupal 6.#20
Also, whenever you use parseInt(), you have to specify the data value format.
#21
patch looks good and works. Thanks, sun.
#22
This needs to be fixed in D6 also, so here is a patch :)
#23
Committed to CVS HEAD. Thanks.
#24
Now to D6. See #22.
#25
Proper patch this time.
#26
Last patch didn't help me. I have Locations module installed and I'm collecting user's city information using autocomplete field. List of cities displays right under label for input field. After applying this patch autocomplete div started to appear somewhere right from input if FF3.5 and nothing changed in Chrome 7.
So the following js code became an answer for me:
/**
* Positions the suggestions popup and starts a search
*/
Drupal.jsAC.prototype.populatePopup = function () {
// Show popup
if (this.popup) {
$(this.popup).remove();
}
this.selected = false;
this.popup = document.createElement('div');
this.popup.id = 'autocomplete';
this.popup.owner = this;
var inputPosition = $(this.input).position();
var inputWrapperPosition = $('div#'+$(this.input).attr('id')+'-wrapper').position();
$(this.popup).css({
marginTop: this.input.offsetHeight +'px',
marginLeft: (inputPosition.left-inputWrapperPosition.left)+'px',
width: (this.input.offsetWidth - 4) +'px',
display: 'none'
});
$(this.input).before(this.popup);
// Do search
this.db.owner = this;
this.db.search(this.input.value);
};
I just wrote it in my helper module js and load it in footer of page. Could be usefull for someone.
#27
#25 patch works for Firefox 3, 3.5 and 3.6 + Chrome 7 & 8 + Internet Explorer 6 to 9 on Windows.
@petr.gorodechnyj I test it with the autocomplete from Location module, and everything looks ok. Did you test it with Garland or other theme distributed with Drupal?
#28
@roborn: Yeah, that was with Fusion Starter.
#29
Mmm... I test it again using Fusion Starter, and everything is working as expected.
#30
Hi!
Will this be integrated in core ?
How to correct it from a module without patching? I can only see using a js file to change #autocomplete css property (as what the patch does). Would it be a nice way to do it?
I am the new maintainer of Search Autocomplete module and so porting it to D6 and D7. I want to correct this in the D6 version. (haven't try in D7: has the issue been corrected ?)
Thx,
Miroslav
#31
I tried the code in #26, works for me, with a few minor adjustments.
You could add that js to this project, I reckon it would solve at least some of the positioning problems.
#32
#33
This worked for more (CSS: .form-item{position:relative;})
http://drupal.org/node/1218684