ionic input text right align, shifting label to left

Question

I have added a class to these 2 inputs to align the input text to the right

one label shifts to the left one focused on and adds padding to the right of the input

this doesn't happen to the second

help

.currency {
  text-align: right;
}

<ion-view hide-back-button="true" view-title="{{vm.title}}">
    <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-ios-close-empty" ng-click="vm.cancelDeposit()"></button>
    </ion-nav-buttons>
    <ion-content>
        <form name="captureCheckForm" ng-submit="vm.submitCheck(captureCheckForm)">
            <!-- ERRORS -->
            <div ng-show="captureCheckForm.account.$invalid && captureCheckFrom.$submited">
                <div class="instruction-toast">Select Your Account</div>
            </div>

            <div ng-show="captureCheckForm.depositAmount.$invalid && captureCheckFrom.$submited">
                <div class="instruction-toast">Enter Deposit Amount</div>
            </div>

            <div ng-show="captureCheckForm.checkAmount.$invalid && captureCheckFrom.$submited">
                <div class="instruction-toast">Enter Check Amount</div>
            </div>

            <div ng-show="vm.checkFrontImage === undefined && captureCheckFrom.$submited">
                <div class="instruction-toast">Capture Check Front</div>
            </div>

            <div ng-show="vm.checkBackImage === undefined && captureCheckFrom.$submited">
                <div class="instruction-toast">Capture Check Back</div>
            </div>

            <!-- End ERRORS -->

            <div class="list">
                <!-- Account Select -->
                <label class="item item-input item-select">
                    <div class="input-label">
                        Select Account
                    </div>
                    <select name="account" required ng-model="vm.selectedAccount" ng-change="vm.accountChange()">
                        <option ng-repeat="account in vm.accounts">{{account.accountNumber}}</option>
                    </select>
                </label>

                <!-- Deposit Amount -->
                <label class="item item-input">
                    <span class="input-label">Deposit Amount:</span>
                    <input ng-currency class="currency" type="text" ng-required="true" name="depositAmount" ng-model="vm.amount" ng-change="vm.depositAmountChange()">
                </label>

                <!-- Check Amount -->
                <label class="item item-input">
                    <span class="input-label">Check Amount:</span>
                    <input ng-currency class="currency" type="text" ng-required="true" name="checkAmount" ng-model="vm.checkAmount" ng-change="vm.checkAmountChange()">
                </label>

                <!-- Scan Check Front Button -->
                <div class="card" ng-click="vm.miSnapCheckFront()">
                    <div class="item item-text-wrap">
                        <div class="item item-icon-right">
                            <h2 ng-hide="vm.checkFrontImage !== '' && vm.checkFrontImage !== undefined">Capture Check Front</h2>
                            <h2 ng-show="vm.checkFrontImage !== '' && vm.checkFrontImage !== undefined">Rake Check Front</h2>
                            <img class="capture-check-thumbnail" ng-show="vm.checkFrontImage !== '' && vm.checkFrontImage !== undefined" ng-src="{{vm.checkFrontImage}}"><!-- data:image/png;base64, -->
                            <i class="icon ion-camera" ng-hide="vm.checkFrontImage !== '' && vm.checkFrontImage !== undefined"></i>
                            <i class="icon ion-arrow-return-left" ng-show="vm.checkFrontImage !== '' && vm.checkFrontImage !== undefined"></i>
                        </div>
                    </div>
                </div>

                <!-- Scan Check Back Button -->
                <div class="card" ng-click="vm.miSnapCheckBack()">
                    <div class="item item-text-wrap">
                        <div class="item item-icon-right">
                            <h2 ng-hide="vm.checkBackImage !== '' && vm.checkBackImage !== undefined">Capture Check Back</h2>
                            <h2 ng-show="vm.checkBackImage !== '' && vm.checkBackImage !== undefined">Rake Check Back</h2>
                            <img class="capture-check-thumbnail" ng-show="vm.checkBackImage !== '' && vm.checkBackImage !== undefined" ng-src="{{vm.checkBackImage}}">
                            <i class="icon ion-camera" ng-hide="vm.checkBackImage !== '' && vm.checkBackImage !== undefined"></i>
                            <i class="icon ion-arrow-return-left" ng-show="vm.checkBackImage !== '' && vm.checkBackImage !== undefined"></i>
                        </div>
                    </div>
                </div>

                <!-- Submit Check Button -->
                <button type="submit" ng-disabled="captureCheckForm.$invalid || vm.checkFrontImage === undefined || vm.checkBackImage === undefined" class="button button-full button-positive">
                    Submit Check
                </button>
            </div>
        </form>
    </ion-content>
</ion-view>

Bernardo Dal Corno Bernardo Dal Corno · Accepted Answer · 2016-09-24T17:41:19

Old question but no answer. That was a tricky one! After a bunch of things not working, and then working with several rules to the label, the span and the input, I've figure out the problem: the .input-label in ionic has a default display: table.

So you can easily solve by setting:

.input-label {
  display: inline-block;
}

ionic input text right align, shifting label to left

1 Answers