CODEWITHSUNDEEP
angularjs
Shreya
Shreya

Reputation: 11

AngularJS dropdown scrollbar and width

I have angularjs app. I added dropdown but if the option name is too long, the dropdown's width just increases and as the number of items increase its height also keeps increasing. I created jsfiddle to demonstrate what I am able to achieve till now. http://jsfiddle.net/ibha/jd9jk755/4/

<div ng-controller="MyCtrl">    
    <select class="scrollwidth">
    <option ng-class="scrollwidth" ng-repeat="p in optionList" value="{{p.name}}">
      {{p.name}}
    </option>
</select>
</div>

function MyCtrl($scope) {
    $scope.optionList = [{name : 'vlist3'},{name : 'vlist1'},{name : 'vlist2'},{name : 'vlistLongNameeeeeeeeeeeeeeeeeeeeeeeeeee'}];                        

}

Please let me know how I can make the width and height of dropdown constant and add scrollbar.

Upvotes: 0

Views: 3068

Answers (2)

Jakob Jingleheimer
Jakob Jingleheimer

Reputation: 31590

I quickly threw this together with an ngRepeat: http://jsfiddle.net/jshado1/nfkgp5nL/

Html

<select
    class="truncated-select">
    <option
        ng-repeat="option in options"
        value="{{option.value}}"
        truncate-option="option.label">{{option.label}}</option>
</select>

Angular

angular.module('MyApp', [])
.controller('MyController', [
    '$scope',
    function MyController( $scope ) {
        $scope.options = [
            {
                "label": "1label",
                "value": "option1value"
            },
            {
                "label": "option2label",
                "value": "option2value"
            },
            {
                "label": "option3label",
                "value": "option3value"
            }
        ];
        $scope.myModel = $scope.options[0];
    }
])
.directive('truncateOption', function truncateOption() {
    return {
        restrict: 'A',
        scope: {
            label: '=truncateOption'
        },
        link: function postLink(scope, element) {
            var selectElm = element.parent(),
                maxWidth  = selectElm.css('max-width').replace('px',''),
                fontSize  = selectElm.css('font-size').replace('px',''),
                maxLength = Math.floor(maxWidth / fontSize);
            if ( scope.label.length > maxLength )
                scope.label = scope.label.slice( 0 , maxLength-1 ) + '…';
        }
    };
});

With the above, it will respect the value of max-width on the select: max-width: 10em = 10 characters in the option's label.

Upvotes: 0

Phill
Phill

Reputation: 18804

Unfortunately this is what the browser is doing, you can't change it, the only solution I'm aware of is to truncate the actual text yourself.

You could create a filter for this like so (this is an example):

angular.module('myApp', [])
    .filter('truncate', function () {
    return function (input, characters) {
        if (input.length > characters) {
            return input.substr(0, characters) + '...';
        }

        return input;
    };
}).controller('MyCtrl', function MyCtrl($scope) {
    $scope.optionList = [{
        name: 'vlist3'
    }, {
        name: 'vlist1'
    }, {
        name: 'vlist2'
    }, {
        name: 'vlistLongNameeeeeeeeeeeeeeeeeeeeeeeeeee'
    }];
});

Working example:

http://jsfiddle.net/o3a3jcb9/

Upvotes: 0

Related Questions