diff --git a/sao/src/common.js b/sao/src/common.js
index e0e2b8b58f..e7cd7cb9ad 100644
--- a/sao/src/common.js
+++ b/sao/src/common.js
@@ -3745,14 +3745,15 @@
'data-toggle': 'dropdown'
}).appendTo(this.dropdown);
this.menu = jQuery('
', {
- 'class': 'dropdown-menu',
+ 'class': 'dropdown-menu dropdown-completion',
'role': 'listbox'
}).appendTo(this.dropdown);
- this.separator = jQuery('', {
- 'role': 'separator',
- 'class': 'divider'
- }).appendTo(this.menu);
- this.separator.hide();
+ this.actions = jQuery('', {
+ 'class': 'dropdown-header dropdown-action'
+ }).append(jQuery('', {
+ 'class': 'list-unstyled',
+ })).appendTo(this.menu);
+ this.actions.hide();
this.source = source;
this.match_selected = match_selected;
@@ -3806,12 +3807,12 @@
if (create) {
actions.push(['create', Sao.i18n.gettext('Create...')]);
}
- this.menu.find('li.action').remove();
+ this.actions.find('li.action').remove();
if (jQuery.isEmptyObject(actions)) {
- this.separator.hide();
+ this.actions.hide();
return;
}
- this.separator.show();
+ this.actions.show();
actions.forEach(function(action) {
var action_id = action[0];
var content = action[1];
@@ -3827,7 +3828,7 @@
}
this.input.val('');
})
- .appendTo(this.menu);
+ .appendTo(this.actions.children().first());
}, this);
},
_format: function(content) {
diff --git a/sao/src/sao.less b/sao/src/sao.less
index 8505e76c87..d02484efd8 100644
--- a/sao/src/sao.less
+++ b/sao/src/sao.less
@@ -141,6 +141,23 @@ html[theme="default"] {
.user-select(text);
}
+.dropdown-completion {
+ max-height: 50vh;
+ overflow-y: auto;
+
+ .dropdown-action {
+ background-color: @body-bg;
+ border-top: @dropdown-divider-bg solid 1px;
+ bottom: -5px;
+ position: sticky;
+
+ .action a {
+ clear: both;
+ display: block;
+ }
+ }
+}
+
#tablist {
display: flex;
overflow-x: auto;