diff --git a/autocomplete_light/static/autocomplete_light/autocomplete.js b/autocomplete_light/static/autocomplete_light/autocomplete.js index 6de07c6d2..026d8cfb6 100644 --- a/autocomplete_light/static/autocomplete_light/autocomplete.js +++ b/autocomplete_light/static/autocomplete_light/autocomplete.js @@ -55,6 +55,44 @@ Also, note that this script is composed of two main parts: `$.fn.yourlabsAutocomplete` */ +if (window.findPosX === undefined) { + window.findPosX = function(obj) { + var curleft = 0; + if (obj.offsetParent) { + while (obj.offsetParent) { + curleft += obj.offsetLeft - ((isOpera) ? 0 : obj.scrollLeft); + obj = obj.offsetParent; + } + // IE offsetParent does not include the top-level + if (isIE && obj.parentElement){ + curleft += obj.offsetLeft - obj.scrollLeft; + } + } else if (obj.x) { + curleft += obj.x; + } + return curleft; + } +} + +if (window.findPosY === undefined) { + window.findPosY = function(obj) { + var curtop = 0; + if (obj.offsetParent) { + while (obj.offsetParent) { + curtop += obj.offsetTop - ((isOpera) ? 0 : obj.scrollTop); + obj = obj.offsetParent; + } + // IE offsetParent does not include the top-level + if (isIE && obj.parentElement){ + curtop += obj.offsetTop - obj.scrollTop; + } + } else if (obj.y) { + curtop += obj.y; + } + return curtop; + } +} + // Our class will live in the yourlabs global namespace. if (window.yourlabs === undefined) window.yourlabs = {}; @@ -237,6 +275,12 @@ yourlabs.Autocomplete = function (input) { // The autocomplete box HTML. this.box = $(''); + + /* + We'll append the box to the container and calculate an absolute position + every time the autocomplete is shown in the fixPosition method. + */ + this.container = $('body'); }; /* @@ -499,19 +543,22 @@ yourlabs.Autocomplete.prototype.move = function(e) { [target, this]); }; -// Calculate and set the outer container's absolute positionning. -yourlabs.Autocomplete.prototype.fixPosition = function() { - // Insert the autocomplete container after the input. - var pos = $.extend({}, this.input.position(), { - height: this.input.outerHeight() - }); +/* +Calculate and set the outer container's absolute positionning. We're copying +the system from Django admin's JS widgets like the date calendar, which means: - this.input.parents().filter(function() { - return $(this).css('overflow') === 'hidden'; - }).first().css('overflow', 'visible').addClass('autocomplete-light-clearfix'); +- the autocomplete box is an element appended to this.co, +- +*/ +yourlabs.Autocomplete.prototype.fixPosition = function() { + var el = this.input.get(0) - this.box.insertAfter(this.input).css( - {top: pos.top + pos.height, left: pos.left}); + this.box.appendTo(this.container).css({ + position: 'absolute', + minWidth: parseInt(this.input.outerWidth()), + top: (findPosY(el) + this.input.outerHeight()) + 'px', + left: findPosX(el) + 'px' + }); }; // Proxy fetch(), with some sanity checks. diff --git a/autocomplete_light/static/autocomplete_light/style.css b/autocomplete_light/static/autocomplete_light/style.css index 2a7134c46..fc6b6c6ec 100644 --- a/autocomplete_light/static/autocomplete_light/style.css +++ b/autocomplete_light/static/autocomplete_light/style.css @@ -8,7 +8,6 @@ left: 0; z-index: 1000; display: none; - float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; @@ -77,7 +76,6 @@ .autocomplete-light-widget input:focus { margin: 0; outline: 0; - width: 230px; } .autocomplete-light-widget { @@ -160,11 +158,6 @@ input.autocomplete.xhr-pending { clear: both; } -/* grappelli specific */ -fieldset.grp-module .grp-row { - overflow: visible !important; -} - /* credit: http://www.csslab.cl/2008/01/30/ventana-modal-solo-con-css/ */ #yourlabs_overlay { position: absolute; diff --git a/autocomplete_light/widgets.py b/autocomplete_light/widgets.py index 7b0002e60..c8430b0da 100644 --- a/autocomplete_light/widgets.py +++ b/autocomplete_light/widgets.py @@ -186,7 +186,7 @@ def build_attrs(self, extra_attrs=None, **kwargs): if 'class' not in attrs.keys(): attrs['class'] = '' - attrs['class'] += ' autocomplete' + attrs['class'] += ' autocomplete vTextField' attrs.setdefault('data-autocomplete-choice-selector', '[data-value]') attrs.setdefault('data-autocomplete-url', diff --git a/test_project/admin_autocomplete_in_row/admin.py b/test_project/admin_autocomplete_in_row/admin.py index 4774e3081..64ef2c9c4 100644 --- a/test_project/admin_autocomplete_in_row/admin.py +++ b/test_project/admin_autocomplete_in_row/admin.py @@ -7,5 +7,5 @@ class YourModelAdmin(admin.ModelAdmin): form = shortcuts.modelform_factory(YourModel, exclude=[]) - fields = (('name', 'relation'),) + fields = (('name', 'relation'),('name2', 'date_and_time')) admin.site.register(YourModel, YourModelAdmin) diff --git a/test_project/admin_autocomplete_in_row/models.py b/test_project/admin_autocomplete_in_row/models.py index 250159c70..119d92d60 100644 --- a/test_project/admin_autocomplete_in_row/models.py +++ b/test_project/admin_autocomplete_in_row/models.py @@ -6,6 +6,9 @@ class YourModel(models.Model): name = models.CharField(max_length=100) relation = models.ForeignKey('self', null=True, blank=True) + + name2 = models.CharField(max_length=100, null=True, blank=True) + date_and_time = models.DateTimeField(null=True, blank=True) def __str__(self): return self.name diff --git a/test_project/db.sqlite b/test_project/db.sqlite index 0e0de0e02..954d0d1dd 100644 Binary files a/test_project/db.sqlite and b/test_project/db.sqlite differ