All geek questions in one place

Angular - input with addon

I am trying to create input with additional text after it using angular -material . I want to achieve a similar effect, for example, bootstrap.input-group-addon : enter image description here

The closest I got 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>

Which gives the following result: enter image description here

As you can see, 2 fields are offset.

I also tried using vertical-align in <span>%</span> instead of layout-align="center center" , but it seems to be ignored.

+6
source share
3 answers

I figured out a solution using <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>

"regular-font" is some non-existent library of icon fonts so that the text inside the <md-icon> not interpreted as a material icon.

Now it is well aligned:

enter image description here

Here you can see a working solution: http://codepen.io/LukaszWiktor/pen/oXoqYg

+6
source

I just figured out how to do this if you want the add-in to contain more than one character using flexbox.

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

Important parts of flex="80" for the input element and flex on the span . That says input takes up 80% of the space, and for span to fill in the remainder (at least I think so, I'm still studying flexbox).

The end result is as follows:

enter image description here

+3
source

I made it a bit like bootstrap style as follows:

 <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 for your review:

enter image description here

+2
source

Source: https://habr.com/ru/post/989675/

More articles:


All Articles