changed: show truncated single value in select/select1 minimal widget…

… + wider widget, kobotoolbox/enketo-express#136
kobotoolbox · Mar 28, 2016 · 76ef468 · 76ef468
1 parent b519a50
commit 76ef468
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/src/sass/core/_variables.scss b/src/sass/core/_variables.scss
@@ -108,3 +108,5 @@ $state-danger-bg: #f2dede !default;
 $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default;
 
 //#EED3D7;
+
+$golden-ratio: 1.61803;
diff --git a/src/widget/select-desktop/selectpicker.js b/src/widget/select-desktop/selectpicker.js
@@ -46,7 +46,7 @@ define( function( require, exports, module ) {
 
         this.$picker = null;
         this.noneSelectedText = t( 'selectpicker.noneselected' ) || 'none selected';
-        this.lengthmax = options.maxlength || 15;
+
         this.multiple = ( typeof $( element ).attr( 'multiple' ) !== 'undefined' && $( element ).attr( 'multiple' ) !== false );
         this._init();
     }
@@ -139,8 +139,6 @@ define( function( require, exports, module ) {
      * @return {string}
      */
     DesktopSelectpicker.prototype._createSelectedStr = function() {
-        var textToShow;
-        var xSelectedTxt;
         var selectedLabels = [];
         var $select = $( this.element );
         $select.find( 'option:selected' ).each( function() {
@@ -151,12 +149,13 @@ define( function( require, exports, module ) {
 
         if ( selectedLabels.length === 0 ) {
             return this.noneSelectedText;
+        } else if ( selectedLabels.length === 1 ) {
+            return selectedLabels[ 0 ];
+        } else {
+            return t( 'selectpicker.numberselected', {
+                number: selectedLabels.length
+            } ) || selectedLabels.length + ' selected';
         }
-        textToShow = selectedLabels.join( ', ' );
-        xSelectedTxt = t( 'selectpicker.numberselected', {
-            number: selectedLabels.length
-        } ) || selectedLabels.length + ' selected';
-        return ( textToShow.length > this.lengthmax ) ? xSelectedTxt : textToShow;
     };
 
     DesktopSelectpicker.prototype._clickListener = function() {
@@ -227,7 +226,7 @@ define( function( require, exports, module ) {
 
     /**
      * [selectpicker description]
-     * @param {({btnStyle: string, noneSelectedText: string, maxlength:number}|string)=} option options
+     * @param {({btnStyle: string, noneSelectedText: string}|string)=} option options
      * @param {*=} event       [description]
      */
     $.fn[ pluginName ] = function( options, event ) {

diff --git a/src/widget/select-desktop/selectpicker.scss b/src/widget/select-desktop/selectpicker.scss
@@ -1,12 +1,21 @@
 .bootstrap-select {
     margin-top: 15px;
     .dropdown-toggle {
-        min-width: $input-min-width - 14px;
+        width: $input-min-width * $golden-ratio - 14px;
         @include font-normal;
         font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
         text-align: left;
         .caret {
-            margin-left: 10px;
+            position: absolute;
+            top: 14px;
+            right: 12px;
+        }
+        .selected {
+            width: calc(100% - 12px);
+            display: inline-block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
         ~ .dropdown-menu {
             .option-wrapper {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -108,3 +108,5 @@ $state-danger-bg: #f2dede !default;
		$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default;

		//#EED3D7;

		$golden-ratio: 1.61803;