Posición de Autocompletar en Theme bartik

Posición de Autocompletar en Theme bartik

Como ven en la imagen, a utilizar autocompletar en el theme Bartik pasa algo muy raro, se desconfigura y aparece en cualquier posición, para solucionar este bug hay un parche muy sencillo.

  • Buscamos el archivo /misc/autocomplete.js y en la línea 174 agrega la línea para que quede como a continuación. Esto elimina el class necesario para el parche.
 if (popup) {
     this.popup = null;
     $(popup).fadeOut('fast', function () { $(popup).remove(); });
     $(this.input).parent().removeClass('autocomplete-parent');
   }

Luego en la línea 184 agregamos la línea. Esto agrega un class necesario para el parche.

 Drupal.jsAC.prototype.populatePopup = function () {
   var $input = $(this.input);
   $input.parent().addClass('autocomplete-parent');

 

  • Luego en cualquier CSS que utilices en tu proyecto y se asocie al theme agrega las siguientes líneas
 .autocomplete-parent {
  position: relative;
} 

Aquí el patch necesario si necesitas aplicarlo

From 772ffb7baf08a6b6c0922d4226ece608089a7daa Mon Sep 17 00:00:00 2001
From: chrisolof <chrisolof@610882.no-reply.drupal.org>
Date: Tue, 17 Dec 2013 16:30:53 -0700
Subject: [PATCH] Issue #2157907 by chrisolof: Fixed autocomplete suggestions
 popup placement bug.

---
 misc/autocomplete.js           |    3 +++
 modules/system/system.base.css |    3 +++
 2 files changed, 6 insertions(+)

diff --git a/misc/autocomplete.js b/misc/autocomplete.js
index 8f7ac60..7fdf013 100644
--- a/misc/autocomplete.js
+++ b/misc/autocomplete.js
@@ -174,6 +174,7 @@ Drupal.jsAC.prototype.hidePopup = function (keycode) {
   if (popup) {
     this.popup = null;
     $(popup).fadeOut('fast', function () { $(popup).remove(); });
+    $(this.input).parent().removeClass('autocomplete-parent');
   }
   this.selected = false;
   $(this.ariaLive).empty();
@@ -184,6 +185,8 @@ Drupal.jsAC.prototype.hidePopup = function (keycode) {
  */
 Drupal.jsAC.prototype.populatePopup = function () {
   var $input = $(this.input);
+  // Class the input's parent element so it gets relative positioning.
+  $input.parent().addClass('autocomplete-parent');
   var position = $input.position();
   // Show popup.
   if (this.popup) {
diff --git a/modules/system/system.base.css b/modules/system/system.base.css
index 412b18a..5c1b6d5 100644
--- a/modules/system/system.base.css
+++ b/modules/system/system.base.css
@@ -29,6 +29,9 @@
   white-space: pre;
   zoom: 1; /* IE7 */
 }
+.autocomplete-parent {
+  position: relative;
+}
 /* Animated throbber */
 html.js input.form-autocomplete {
   background-image: url(../../misc/throbber.gif);
-- 
1.7.10.4