From 3b1bbce99834f15b26bcb499bdbba09dc8ebc150 Mon Sep 17 00:00:00 2001 From: The Minh Luong Date: Tue, 1 Mar 2022 14:35:47 -0500 Subject: [PATCH] Bug 27113: Rebase and correct autocomplete appearance Rebase of previous patches and correct the buggy behavior (See "GIF showing buggy behavior attachment") Test plan: 1- Search for an item. Notice that the autocomplete functionnality is not available. (See "Result" attachment) 2- Make sure that you are using Elasticsearch as your searching engine. (Preference->SearchEngine->ElasticSearch) 3- Apply the patch. 4- Run ./installer/data/mysql/updatedatabase.pl 5- Looks for the following preferences : - IntranetAutocompleteElasticSearch - OPACAutocompleteElasticSearch 6- Set their value to show. 7- Rebuild the OPAC and staff client CSS (This step is important because the autocomplete CSS is moved to the main SCSS file): Instructions here: https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client 8- Search for an item and notice that the autocomplete functionnality is now available. 9- In the staff interface, go in "Search the catalog". 10- Notice that the buggy behavior is now fixed. --- koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 3 +-- .../bootstrap/js/opac-elasticsearch/opac-autocomplete.js | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss index e023e80647..6991f8f80f 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss +++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss @@ -2860,7 +2860,6 @@ $star-selected: #EDB867; .autocomplete { /*the container must be positioned relative:*/ position: relative; - display: inline-block; width: 100%; } @@ -2869,7 +2868,7 @@ $star-selected: #EDB867; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; - z-index: 99; + z-index: 9999; div { padding: 10px; diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/opac-elasticsearch/opac-autocomplete.js b/koha-tmpl/opac-tmpl/bootstrap/js/opac-elasticsearch/opac-autocomplete.js index eaa8ece900..01d6332caa 100644 --- a/koha-tmpl/opac-tmpl/bootstrap/js/opac-elasticsearch/opac-autocomplete.js +++ b/koha-tmpl/opac-tmpl/bootstrap/js/opac-elasticsearch/opac-autocomplete.js @@ -51,6 +51,7 @@ function autocomplete(inp, nb, left, right) { /* create new div with position relative for class .autocomplete with absolute */ var div_relative = document.createElement('div'); $(div_relative).addClass( "autocomplete" ); + $(div_relative).css("display", "inline-block"); div_relative.append(inp); /* input doesn't have an elem after, add it to parent */ if (next_elem_inp === null){ -- 2.25.1