顯示具有長標籤的md-input的星號圖標

Question

如文檔中所述，md-input會爲標籤添加一個星號（如果其爲必填類型）。但是，如果輸入容器具有寬度限制（例如限制寬度）並且具有長標籤，則標籤被截斷並且星號不可見。所以從UX角度來看，除非與之交互，否則它並不直觀，表單的字段是必需的。

下面我創建了一個小型代碼文件來說明這一點。檢查兩個輸入字段是必需的，具有不同的標題。

典筆 - 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 
}