diff --git a/public/app/directives/variableValueSelect.js b/public/app/directives/variableValueSelect.js
index 43c1014160e..e74564369c2 100644
--- a/public/app/directives/variableValueSelect.js
+++ b/public/app/directives/variableValueSelect.js
@@ -93,6 +93,7 @@ function (angular, app, _) {
});
scope.search = {query: '', options: scope.options};
+ scope.selectedValuesCount = currentValues.length;
scope.openDropdown();
};
@@ -176,8 +177,10 @@ function (angular, app, _) {
value: _.pluck(selected, 'value'),
};
+ scope.selectedValuesCount = variable.current.value.length;
+
// only single value
- if (variable.current.value.length === 1) {
+ if (scope.selectedValuesCount === 1) {
variable.current.value = selected[0].value;
}
diff --git a/public/app/features/dashboard/partials/variableValueSelect.html b/public/app/features/dashboard/partials/variableValueSelect.html
index afa4bdbe649..3bbc5060c0e 100644
--- a/public/app/features/dashboard/partials/variableValueSelect.html
+++ b/public/app/features/dashboard/partials/variableValueSelect.html
@@ -10,19 +10,27 @@
-
diff --git a/public/css/less/submenu.less b/public/css/less/submenu.less
index a92cb163537..de12ca4a108 100644
--- a/public/css/less/submenu.less
+++ b/public/css/less/submenu.less
@@ -46,7 +46,10 @@
top: 47px;
min-width: 150px;
max-height: 400px;
+ min-height: 150px;
background: @dropdownBackground;
+ overflow-y: auto;
+ overflow-x: hidden;
box-shadow: 0px 0px 55px 0px black;
border: 1px solid @grafanaTargetFuncBackground;
z-index: 1000;
@@ -62,7 +65,6 @@
.variable-options-column {
max-height: 350px;
- overflow: auto;
display: table-cell;
line-height: 26px;
&:nth-child(2) {
@@ -95,22 +97,27 @@
}
}
+.variable-options-column-header {
+ background-color: @bodyBackground;
+ text-align: center;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ margin-bottom: 5px;
+}
+
+.variable-options-footer {
+ background-color: @bodyBackground;
+ text-align: center;
+ padding-top: 5px;
+ padding-bottom: 5px;
+}
+
.variable-option {
&:hover, &.highlighted {
background-color: @blueDark;
}
}
-.variable-search-wrapper {
- input {
- width: 100%;
- padding: 7px 8px;
- height: 100%;
- box-sizing: border-box;
- margin-bottom: 6px;
- }
-}
-
.dash-nav-link {
color: @textColor;
}