Question

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

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

代码笔 - 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>

Answer 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
}

显示具有长标签的md输入的星号图标

1 个答案: