CODEWITHSUNDEEP
ionic-framework
0tto
0tto

Reputation: 357

Invisible input-label with item-floating-label and set input value

In this sample I expected the Email label to be visible above the email input. It appears if I start to edit the input data.

Am I doing something wrong here?

<label class="item item-input item-floating-label">
  <span class="input-label">Email</span>
  <input type="email" value="[email protected]">
</label>

Upvotes: 3

Views: 4568

Answers (4)

saverio.caminiti
saverio.caminiti

Reputation: 61

I had a similar problem using AppGyver Supersonic. I solved controlling the has-input class on my input-label using ng-class, like this:

<label class="item item-input item-floating-label">
  <span class="input-label" ng-class="{'has-input': username}">Choose a username</span>
  <input type="text" placeholder="Choose a username" ng-model="username">
</label>

Upvotes: 1

Venkateshwar V
Venkateshwar V

Reputation: 1

Set the placeholder with the same text as the label. In this case placeholder="Email". The Floating item label works this way.. Until the field is filled, the label will not be visible, instead the placeholder will be visible. Just as you type in the field, the label will appear.The animation is sleek and nice. Just make sure the text is same.(case sensitive.)

Upvotes: 0

JanP
JanP

Reputation: 1581

With ng-model in stead of value it will have the expected behaviour. So change your code to

<label class="item item-input item-floating-label">
  <span class="input-label">Email</span>
  <input type="email" ng-model="account.email">
</label>

and add something like the following in your controller

$scope.account = {
    email: '[email protected]'
};

Upvotes: 2

Swaminathan Vetri
Swaminathan Vetri

Reputation: 413

The item-floating-label class animates the label as the user types in the input field. Refer documentation for more details.

http://ionicframework.com/docs/components/#forms-floating-labels

For your requirement to always show the label above the input field, you have to use the item-stacked-label

http://ionicframework.com/docs/components/#forms-stacked-labels

Upvotes: 0

Related Questions