fix(metricsegment): added min width for inputs for metric segment and value select components

torkelo · torkelo · commit 2908c6a80bd5 · 2016-09-30T13:13:28.000+02:00
diff --git a/public/app/core/directives/metric_segment.js b/public/app/core/directives/metric_segment.js
@@ -136,7 +136,7 @@ function (_, $, coreModule) {
 
         $button.click(function() {
           options = null;
-          $input.css('width', ($button.width() + 16) + 'px');
+          $input.css('width', (Math.max($button.width(), 80) + 16) + 'px');
 
           $button.hide();
           $input.show();
diff --git a/public/app/core/directives/value_select_dropdown.js b/public/app/core/directives/value_select_dropdown.js
@@ -236,7 +236,7 @@ function (angular, _, coreModule) {
         var inputEl = elem.find('input');
 
         function openDropdown() {
-          inputEl.css('width', Math.max(linkEl.width(), 30) + 'px');
+          inputEl.css('width', Math.max(linkEl.width(), 80) + 'px');
 
           inputEl.show();
           linkEl.hide();
diff --git a/public/app/partials/valueSelectDropdown.html b/public/app/partials/valueSelectDropdown.html
@@ -10,7 +10,7 @@
 		<i class="fa fa-caret-down"></i>
 	</a>
 
-	<input type="text" class="hidden-input input-small gf-form-input" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.queryChanged()" ></input>
+	<input type="text" class="gf-form-input" style="display: none" ng-keydown="vm.keyDown($event)" ng-model="vm.search.query" ng-change="vm.queryChanged()" ></input>
 
 	<div class="variable-value-dropdown" ng-if="vm.dropdownVisible" ng-class="{'multi': vm.variable.multi, 'single': !vm.variable.multi}">
 		<div class="variable-options-wrapper">
