CODEWITHSUNDEEP
htmlangulartypescriptionic3
Sampath
Sampath

Reputation: 65870

Why no Placeholder text on my Ionic 3 project

I cannot see any placeholder text on my project.Can you tell me why? If I create a new project then it works.This is a really strange issue. Any clue about this behavior?

enter image description here 

 <ion-list>
    <ion-item>
      <ion-label color="primary">Inline Label</ion-label>
      <ion-input placeholder="Text Input"></ion-input>
    </ion-item>
 </ion-list>

I'm using latest ionic. 

@ionic/cli-utils  : 1.15.0
ionic (Ionic CLI) : 3.15.0

global packages:

cordova (Cordova CLI) : 7.0.1

local packages:

@ionic/app-scripts : 3.0.1
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.7.1

System:

Android SDK Tools : 25.2.5
Node              : v6.10.0
npm               : 3.10.10
OS                : Windows 8.1

Environment Variables:

ANDROID_HOME : C:\Program Files (x86)\Android\android-sdk

Misc:

backend : pro

Here you can see that it renders correctly.Then where is the problem? I have tested this on the device too. Same horror :(

enter image description here

Upvotes: 2

Views: 999

Answers (1)

David
David

Reputation: 7507

OP's Feedback

I have set the $text-input-placeholder-color: rgba(255, 255, 255, 0.5); on variables.scss file. That was the issue.

David's Feeback

Most probably some other (global, higher level) style is infering with the placeholder property. Try inspecting the input element with chrome dev tools and remove/add css selctors one by one to find out which one is causing the trouble (check especially colors, margin, padding, opacity).

Upvotes: 2

Related Questions