为具有长标签的 md-input 显示星号图标答案

【问题标题】：Show Asterisk Icon for md-input having long labels为具有长标签的 md-input 显示星号图标
【发布时间】：2017-06-13 07:54:16
【问题描述】：

如文档中所述，如果它是必需的类型，md-input 会在标签上添加一个星号。但是在输入容器的情况下，具有宽度限制（例如限制宽度）并且具有长标签，标签被截断并且星号不可见。因此，从用户体验的角度来看，表单字段是必需的字段并不直观，除非与之交互。

下面我创建了一个小代码笔来说明这一点。检查两个输入字段都是必需的，具有不同的标题。

代码笔 - Codepen

理想情况下，我希望修剪长文本并让星号可见。

感谢您提供任何帮助/建议 :)

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>

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

这是您尝试做的吗？

https://codepen.io/anon/pen/xrOpXx

.md-required {
  padding-right: 10px !important; //padding very important, else asterisk is hidden (overflow)
  width: auto !important; //width must be auto, by default it takes 100% so the asterisk is at right of the input
}

.md-required:after {
  color: red !important;
  width: 100%; // asterisk container has same width that label
  position: absolute; //position absolute and left 0 to be at same position than label
  left: 0;
  text-align: right; // with that, asterisk is at right
}

【讨论】：