input materiale angolare con un addon

Question

Sto cercando di creare un input con un testo in più dopo averlo utilizzato con angular-material. Voglio ottenere un effetto simile a quello con bootstrap's .input-group-addon:

Il più vicino che ho è this:

<md-content layout-padding> 
    <div layout="row" class="md-whiteframe-z1" style="width: 40%"> 
     <md-select placeholder="Type" ng-model="discount.type" flex="50" class="md-select-full-width"> 
      <md-option value="AMOUNT">Amount</md-option> 
      <md-option value="PERCENT">Percent</md-option> 
     </md-select> 
     <div flex="50" layout="row" layout-align="center center"> 
      <md-input-container flex> 
       <label>Value</label> 
       <input ng-model="discount.value"> 
      </md-input-container> 
      <span>%</span> 
     </div> 
    </div> 
</md-content> 

Ciò che dà seguente risultato:

Come si può vedere i 2 campi sono disallineati.

Ho anche provato a utilizzare vertical-align su <span>%</span> anziché layout-align="center center" ma sembra essere ignorato.

Answer 1

ho capito una soluzione che utilizza <md-icon>:

<md-content layout-padding> 
    <div layout="row" class="md-whiteframe-z1" style="width: 40%"> 
     <md-select placeholder="Type" ng-model="discount.type" flex="50" class="md-select-full-width"> 
      <md-option value="AMOUNT">Amount</md-option> 
      <md-option value="PERCENT">Percent</md-option> 
     </md-select> 
     <div flex="50" layout="row"> 
      <md-input-container flex> 
       <label>Value</label> 
       <input ng-model="discount.value"> 
      </md-input-container> 
      <md-icon md-font-set="regular-font">%</md-icon> 
     </div> 
    </div> 
</md-content> 

Il "regular-font" è una certa non-esistente libreria di font icona per fare in modo che il testo all'interno <md-icon> non sarà interpretato come un icona del materiale.

ora è ben allineati:

si può vedere la soluzione di lavoro qui: http://codepen.io/LukaszWiktor/pen/oXoqYg

Answer 2

ho appena trovato un modo per fare questo anche per quando vuoi l'add per contenere qualcosa di più di un singolo personaggio, usando la flexbox.

<md-input-container flex> 
    <label>Length</label> 
    <input type="number" ng-model="length" flex="80"> 
    <span flex>seconds</span> 
</md-input-container> 

Le parti importanti sono flex="80" sull'elemento input, e flex sul span. Questo sta dicendo allo input di occupare l'80% dello spazio, e per il span per riempire il resto (almeno credo - sto ancora imparando il flexbox).

Il risultato finale assomiglia a questo:

Answer 3

Ho fatto sembrare un po 'di stile di bootstrap più simili in questo modo:

<md-input-container class="md-block"> 
    <label for="discount">Discount</label> 
    <input style="text-align: right; padding-right: 15px;" type="text" id="discount" ng-model="discount" ng-change="updateDiscount()"> 
    <span style="margin-top: 5px; position: absolute; right: 0;">%</span> 
</md-input-container> 

Screenshot per la tua opinione: