Elastic: Fix position and style of auto-complete dropdown on small screens (#6951)

CHANGELOG

@@ -2,6 +2,7 @@ CHANGELOG Roundcube Webmail
 ===========================
 
 - Elastic: Resizeable columns (#6929)
+- Elastic: Fix position and style of auto-complete dropdown on small screens (#6951)
 - Redis: Improve error handling and phpredis 5.X support (#6888)
 - Fix bug where cache keys were not case-sensitive on MySQL/MSSQL (#6942)
 

program/js/app.js

@@ -5939,7 +5939,7 @@ function rcube_webmail()
     if (!this.ksearch_pane) {
       ul = $('<ul>');
       this.ksearch_pane = $('<div>')
-        .attr({id: 'rcmKSearchpane', role: 'listbox'})
+        .attr({id: 'rcmKSearchpane', role: 'listbox', 'class': 'select-menu inline'})
         .css({position: 'absolute', 'z-index': 30000})
         .append(ul)
         .appendTo(is_framed ? parent.document.body : document.body);
@@ -5962,7 +5962,10 @@ function rcube_webmail()
       this.env.contacts = [];
 
       // Calculate the results pane position and size
-      var pos = $(this.ksearch_input).offset();
+      // Elastic: On small screen we use the width/position of the whole .ac-input element (input's parent)
+      var is_composite_input = $('html').is('.layout-small,.layout-phone') && $(this.ksearch_input).parents('.ac-input').length == 1,
+        input = is_composite_input ? $(this.ksearch_input).parents('.ac-input')[0] : $(this.ksearch_input)[0],
+        pos = $(input).offset();
 
       // ... consider scroll position
       pos.left -= $(document.documentElement).scrollLeft();
@@ -5983,14 +5986,17 @@ function rcube_webmail()
       }
 
       var w = $(is_framed ? parent : window).width(),
+        input_width = $(input).outerWidth(),
         left = w - pos.left > 200 ? pos.left : w - 200,
+        top = (pos.top + input.offsetHeight + 1),
         width = Math.min(400, w - left);
 
       this.ksearch_pane.css({
-        left: left + 'px',
-        top: (pos.top + this.ksearch_input.offsetHeight + 1) + 'px',
-        maxWidth: width + 'px',
+        left: (is_composite_input ? pos.left : left) + 'px',
+        top: top + 'px',
+        maxWidth: (is_composite_input ? input_width : width) + 'px',
         minWidth: '200px',
+        width: is_composite_input ? (input_width + 'px') : 'auto',
         display: 'none'
       });
     }

skins/elastic/styles/widgets/dialogs.less

@@ -68,25 +68,6 @@
     }
 }
 
-#rcmKSearchpane {
-    width: auto;
-    height: auto;
-
-    li {
-        padding-right: .5rem;
-    }
-
-    html.layout-small &,
-    html.layout-phone & {
-        bottom: auto;
-        border: 1px solid @color-input-border;
-    }
-
-    html.layout-phone & {
-        max-width: 100% !important;
-    }
-}
-
 html.layout-small,
 html.layout-phone {
     .popover:not(.select-menu) {
@@ -166,14 +147,35 @@ html.touch .popover {
 .select-menu {
     max-width: initial;
     margin: 0;
+    height: auto;
 
-    .listing li a {
+    .popover-header {
+        border-radius: .25rem .25rem 0 0 !important;
+    }
+
+    .listing li {
+        a {
             padding-left: .25rem;
             outline: 0; // for Android browser
         }
 
-    .popover-header {
-        border-radius: .25rem .25rem 0 0 !important;
+        &:last-child {
+            border-bottom-right-radius: .25rem;
+            border-bottom-left-radius: .25rem;
+        }
+    }
+
+    // Use 'inline' class for menus that have a list elements with no <a> inside
+    // and no header
+    &.inline {
+        .listing li {
+            padding-right: .5rem;
+
+            &:first-child {
+                border-top-left-radius: .25rem;
+                border-top-right-radius: .25rem;
+            }
+        }
     }
 }
 

skins/elastic/ui.js

@@ -3182,7 +3182,7 @@ function rcube_elastic_ui()
             .on('blur', function() { list.removeClass('focus'); })
             .on('focus mousedown', function() { list.addClass('focus'); });
 
-        list = $('<ul>').addClass('form-control recipient-input')
+        list = $('<ul>').addClass('form-control recipient-input ac-input')
             .append($('<li>').append(input))
             .on('click', function() { input.focus(); });