How to align text in angularjs material design

Question

I am using angular material design. This is my code for a floating label for input in HTML.

<h5>LOGIN</h5>
<md-input-container class="md-block">
    <label>Mobile Number</label>

    <input readonly required="" name="mobileNumber" ng-model="mobile" minlength="10" maxlength="10" ng-pattern="/^[0-9]{10}$/">


    <div ng-messages="projectForm.mobileNumber.$error" role="alert">
      <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
            Please enter 10 digit mobile number.
      </div>
    </div>
    <md-button ui-sref="ConfirmAccount" class="md-primary" >Change Number?</md-button>

</md-input-container>

I want change number? to be displayed on right end of input text i.e. 55555555.

Can anyone help me on this?

score -1 · Answer 1 · answered Mar 01 '16 at 18:07

-1

<input readonly required="" name="mobileNumber" ng-model="mobile" minlength="10" maxlength="10" ng-pattern="/^[0-9]{10}$/">
<md-button ui-sref="ConfirmAccount" class="md-primary" >Change Number?</md-button>

As div is a block element, I believe Change Number? is coming in new line. Now, we have moved it above the div. So, it should be fine.

answered Mar 01 '16 at 18:07

Naga Sandeep

1,421
2
13
26

Thanks for your response. I tried this. But still not working. – Devesh Agrawal Mar 02 '16 at 09:21
@DeveshAgrawal See this fiddle https://jsfiddle.net/nagasandeepbondili/t5991vpf/2/ – Naga Sandeep Mar 02 '16 at 09:47

nguyên · Answer 2 · 2017-07-23T00:32:20.937

-3

Try with style="text-align:right":

Example

<input ng-model="vm.invline.price" type="text" readonly style="text-align:right">

real image:

edited Jul 23 '17 at 00:32

answered Oct 06 '16 at 00:01

nguyên

5,156
5
43
45

How to align text in angularjs material design

2 Answers2