javascripts/right-autocompleter-src.js in right-rails-0.5.1 vs javascripts/right-autocompleter-src.js in right-rails-0.5.2

@@ -65,12 +65,14 @@
     // storing the callbacks so we could detach them later
     this._watch = this.watch.bind(this);
     this._hide  = this.hide.bind(this);
     
     this.input.onKeyup(this._watch).onBlur(this._hide);
-    this.container = $E('div', {'class': 'autocompleter'}).insertTo(this.input, 'after');
     
+    this.holder    = $E('div', {'class': 'right-autocompleter'}).insertTo(this.input, 'after');
+    this.container = $E('div', {'class': 'autocompleter'}).insertTo(this.holder);
+    
     this.input.autocompleter = Autocompleter.instances[$uid(input)] = this;
   },
   
   // kills the autocompleter
   destroy: function() {
@@ -90,15 +92,15 @@
   },
   
   // handles the list appearance
   show: function() {
     if (this.container.hidden()) {
-      var dims = this.input.dimensions();
+      var dims = this.input.dimensions(), pos = this.holder.position();
       
       this.container.setStyle({
-        top: (dims.top + dims.height) + 'px',
-        left: dims.left + 'px',
+        top: (dims.top + dims.height - pos.y) + 'px',
+        left: (dims.left - pos.x) + 'px',
         width: dims.width + 'px'
       }).show(this.options.fxName, {
         duration: this.options.fxDuration,
         onFinish: this.fire.bind(this, 'show')
       });
@@ -248,11 +250,11 @@
     
     // building the native spinner
     if (this._spinner == 'native') {
       this._spinner = $E('div', {
         'class': 'autocompleter-spinner'
-      }).insertTo(this.input, 'after');
+      }).insertTo(this.holder);
       
       var dots = '123'.split('').map(function(i) {
         return $E('div', {'class': 'dot-'+i, html: '»'});
       });
       
@@ -263,20 +265,20 @@
       }.bind(this)).periodical(400);
     }
     
     // repositioning the native spinner
     if (this.options.spinner == 'native') {
-      var dims = this.input.dimensions();
+      var dims = this.input.dimensions(), pos = this.holder.position();
       
       this._spinner.setStyle('visiblity: hidden').show();
       
       this._spinner.setStyle({
         visibility: 'visible',
-        top: (dims.top + 1) + 'px',
+        top: (dims.top + 1 - pos.y) + 'px',
         height: (dims.height - 2) + 'px',
         lineHeight: (dims.height - 2) + 'px',
-        left: (dims.left + dims.width - this._spinner.offsetWidth - 1) + 'px'
+        left: (dims.left + dims.width - this._spinner.offsetWidth - 1 - pos.x) + 'px'
       }).hide();
     }
     
     return this._spinner;
   }
@@ -314,6 +316,6 @@
       Autocompleter.find(event);
     }
   }
 });
 
-document.write("<style type=\"text/css\">div.autocompleter{display:none;position:absolute;z-index:100000000;border:none;margin:0;padding:0;background:white;-moz-box-shadow:#BBB .2em .2em .4em;-webkit-box-shadow:#BBB .2em .2em .4em;overflow:hidden}div.autocompleter ul{list-style:none;margin:0;padding:0;border:none;background:none;*border-bottom:1px solid #CCC}div.autocompleter ul li{list-style:none;font-weight:normal;margin:0;padding:.2em .4em;border:1px solid #CCC;border-top:none;border-bottom:none;background:none;cursor:pointer}div.autocompleter ul li:first-child{border-top:1px solid #CCC}div.autocompleter ul li:last-child{border-bottom:1px solid #CCC;*border-bottom:none}div.autocompleter ul li.current{background:#DDD}div.autocompleter-spinner{position:absolute;z-index:100000000;text-align:center;font-size:140%;font-family:Georgia;background:#DDD;color:#666;display:none;width:1em;margin:0;padding:0}div.autocompleter-spinner div.dot-1{margin-left:-4px}div.autocompleter-spinner div.dot-2{}div.autocompleter-spinner div.dot-3{margin-left:4px}</style>");
+document.write("<style type=\"text/css\">div.right-autocompleter,div.autocompleter,div.autocompleter ul,div.autocompleter ul li,div.autocompleter-spinner,div.autocompleter-spinner div{border:none;background:none;margin:0;padding:0;list-style:none;font-weight:normal}div.right-autocompleter{position:absolute;display:inline}div.autocompleter{display:none;position:absolute;z-index:9999999;background:white;-moz-box-shadow:#BBB .2em .2em .4em;-webkit-box-shadow:#BBB .2em .2em .4em;overflow:hidden}div.autocompleter ul{*border-bottom:1px solid #CCC}div.autocompleter ul li{padding:.2em .4em;border:1px solid #CCC;border-top:none;border-bottom:none;cursor:pointer}div.autocompleter ul li:first-child{border-top:1px solid #CCC}div.autocompleter ul li:last-child{border-bottom:1px solid #CCC;*border-bottom:none}div.autocompleter ul li.current{background:#DDD}div.autocompleter-spinner{position:absolute;z-index:100000000;text-align:center;font-size:140%;font-family:Georgia;background:#DDD;color:#666;display:none;width:1em}div.autocompleter-spinner div.dot-1{margin-left:-4px}div.autocompleter-spinner div.dot-2{}div.autocompleter-spinner div.dot-3{margin-left:4px}</style>");
\ No newline at end of file