Is it possible to truncate the text of a selected item within an md-select statement such that it fits within the allocated space? The only behavior I can get is that the full text of the item selected is always displayed.
I created an example of my problem on codepen:
Thanks!
<html ng-app="playground">
<head>
<script src="//code.angularjs/1.4.8/angular.js"></script>
<script src="//code.angularjs/1.4.8/angular-animate.js"></script>
<script src="//code.angularjs/1.4.8/angular-aria.js"></script>
<script src="//code.angularjs/1.4.8/angular-messages.js"></script>
<script src="//rawgit/angular/bower-material/master/angular-material.js"></script>
<link rel="stylesheet" href="//rawgit/angular/bower-material/master/angular-material.css"></link>
</head>
<body layout-align="center center" layout="column" ng-app="demoApp" ng-controller="AppCtrl">
<md-select ng-model="name" style="width: 200px;" placeholder="Choose">
<md-option>This is a very long text that when selected flows outside of the available space and is not truncated</md-option>
<md-option>Option 2</md-option>
<md-option>Option 3</md-option>
</md-select>
</body>
</html>
angular.module('playground', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
});
Is it possible to truncate the text of a selected item within an md-select statement such that it fits within the allocated space? The only behavior I can get is that the full text of the item selected is always displayed.
I created an example of my problem on codepen: http://codepen.io/anon/pen/QymLwr
Thanks!
<html ng-app="playground">
<head>
<script src="//code.angularjs/1.4.8/angular.js"></script>
<script src="//code.angularjs/1.4.8/angular-animate.js"></script>
<script src="//code.angularjs/1.4.8/angular-aria.js"></script>
<script src="//code.angularjs/1.4.8/angular-messages.js"></script>
<script src="//rawgit./angular/bower-material/master/angular-material.js"></script>
<link rel="stylesheet" href="//rawgit./angular/bower-material/master/angular-material.css"></link>
</head>
<body layout-align="center center" layout="column" ng-app="demoApp" ng-controller="AppCtrl">
<md-select ng-model="name" style="width: 200px;" placeholder="Choose">
<md-option>This is a very long text that when selected flows outside of the available space and is not truncated</md-option>
<md-option>Option 2</md-option>
<md-option>Option 3</md-option>
</md-select>
</body>
</html>
angular.module('playground', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
});
4 Answers
Reset to default 2Make a filter.
$filter
In HTML Template Binding
{{ filter_expression | filter : expression : parator}}In JavaScript
$filter('filter')(array, expression, parator)
via: https://docs.angularjs/api/ng/filter/filter
Screenshot:
Demo: http://codepen.io/anon/pen/gPeMpd?editors=1010
Markup with filter set to 15 characters:
<md-option>{{myLongString | truncate:15}}</md-option>
truncate Filter:
// Filter below found here: http://jsfiddle/tuyyx/
app.filter('truncate', function() {
return function(text, length, end) {
if (isNaN(length))
length = 10;
if (end === undefined)
end = "...";
if (text.length <= length || text.length - end.length <= length) {
return text;
} else {
return String(text).substring(0, length - end.length) + end;
}
};
});
You can do this in CSS.
md-option {
text-overflow: ellipsis;
}
The apparently is a bug is already demonstrated at https://github./angular/material/issues/6312 A workaround is also described there that works well for me, i.e. the following CSS:
.md-select-value *:first-child {
width: calc(100% - 24px);
}
See http://codepen.io/anon/pen/GodRXP for an updated codepen.
This worked for me just by using CSS
.customTruncatedText {
overflow: hidden;
text-overflow: ellipsis;
}