Documentation states that md-inputs add an asterisk to the label if it is a required type. However, when input containers have width constraints and long labels, the label gets truncated and the asterisk becomes invisible. From a user experience perspective, this makes it difficult to determine which fields in the form are required without interacting with them.
Below, I have provided a small codepen to demonstrate this issue. Both input fields are marked as required with different titles.
CodePen - Codepen
Ideally, I would like to trim the long text and ensure the asterisk is visible.
Any help or suggestions would be greatly appreciated :)
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function($scope) {
$scope.project = {
description: 'Nuclear Missile Defense System',
rate: 500
};
});.md-block {
max-width: 300px;
}<div ng-controller="AppCtrl" layout="column" ng-cloak="" class="inputdemoErrors" ng-app="MyApp">
<md-content>
<form>
<md-input-container class="md-block"> <label>LongTitleLongTitleLongTitleLongTitleLongTitleLongTitleLongTitle</label>
<input ng-model="vm.job.title" ng-required="true">
</md-input-container>
<md-input-container class="md-block">
<label>ShortTitle</label>
<input ng-model="vm.job.title" ng-required="true">
</md-input-container>
</form>
</md-content>
</div>