')
- .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'
});
}
diff --git a/skins/elastic/styles/widgets/dialogs.less b/skins/elastic/styles/widgets/dialogs.less
index 088be827b..666f94ebf 100644
--- a/skins/elastic/styles/widgets/dialogs.less
+++ b/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,15 +147,36 @@ html.touch .popover {
.select-menu {
max-width: initial;
margin: 0;
-
- .listing li a {
- padding-left: .25rem;
- outline: 0; // for Android browser
- }
+ height: auto;
.popover-header {
border-radius: .25rem .25rem 0 0 !important;
}
+
+ .listing li {
+ a {
+ padding-left: .25rem;
+ outline: 0; // for Android browser
+ }
+
+ &:last-child {
+ border-bottom-right-radius: .25rem;
+ border-bottom-left-radius: .25rem;
+ }
+ }
+
+ // Use 'inline' class for menus that have a list elements with no
inside
+ // and no header
+ &.inline {
+ .listing li {
+ padding-right: .5rem;
+
+ &:first-child {
+ border-top-left-radius: .25rem;
+ border-top-right-radius: .25rem;
+ }
+ }
+ }
}
/** PGP Key search/import dialog **/
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index cd2e444c0..199073fb8 100644
--- a/skins/elastic/ui.js
+++ b/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 = $('').addClass('form-control recipient-input')
+ list = $('').addClass('form-control recipient-input ac-input')
.append($('- ').append(input))
.on('click', function() { input.focus(); });