Missing text value in ionic-select

I am having some issues with ion-select. The text value is not shown in ion-option. Please see the following figure for reference:

I added ion-select by using the following code. It is quite straight forward and doesn’t even use a model. I still don’t understand that is it because of the ionic version (or) may be angularJS? Can anyone enlighten me on how to solve this issue?

      <ion-option value="f">Female</ion-option>
      <ion-option value="m">Male</ion-option>

Here is my package.json:

"name": "ionic-hello-world",
"version": "0.0.0",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
"dependencies": {
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@ionic-native/app-availability": "^4.1.0",
    "@ionic-native/core": "3.10.2",
    "@ionic-native/diagnostic": "^4.1.0",
    "@ionic-native/file": "^3.12.1",
    "@ionic-native/geolocation": "^3.14.0",
    "@ionic-native/http": "^3.12.1",
    "@ionic-native/in-app-browser": "^3.12.1",
    "@ionic-native/splash-screen": "3.10.2",
    "@ionic-native/sqlite": "^3.12.1",
    "@ionic-native/status-bar": "3.10.2",
    "@ionic/storage": "2.0.1",
    "cordova-android": "^6.2.3",
    "cordova-plugin-appavailability": "^0.4.2",
    "cordova-plugin-console": "1.0.5",
    "cordova-plugin-device": "1.1.4",
    "cordova-plugin-geolocation": "^2.4.3",
    "cordova-plugin-splashscreen": "~4.0.1",
    "cordova-plugin-statusbar": "2.2.2",
    "cordova-plugin-whitelist": "1.3.1",
    "cordova.plugins.diagnostic": "^3.6.6",
    "ionic-angular": "3.3.0",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
"devDependencies": {
    "@ionic/app-scripts": "1.3.7",
    "@ionic/cli-plugin-cordova": "1.6.2",
    "@ionic/cli-plugin-ionic-angular": "1.4.1",
    "ionic": "3.7.0",
    "typescript": "2.3.3"
"cordovaPlugins": [
"cordovaPlatforms": [],
"description": "HaT: An Ionic project",
"cordova": {
    "plugins": {
        "cordova-plugin-console": {},
        "cordova-plugin-device": {},
        "cordova-plugin-splashscreen": {},
        "cordova-plugin-statusbar": {},
        "cordova-plugin-whitelist": {},
        "ionic-plugin-keyboard": {},
        "cordova-plugin-appavailability": {},
        "cordova-plugin-geolocation": {},
        "cordova.plugins.diagnostic": {}
    "platforms": [

Post your ionic info output please.
What happens if you copy the complete example from the docs into your code?

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Inspect the generated HTML code to see if the values are actually there or not.

Hi Bro, here it is !

You should upgrade app-scripts at least, if possible also ionic itself, to a current version.

Also please don’T forget the 2 other things I posted.

Follow the guidance Sujan has given, as also, do let us know if you are playing with any sass variables or using any custom css, as the button colours are not the default ones.

I used ioncity theme from ionic market. thanks

Hmm, I suspect that’s interfering somehow then. Do recheck that you’ve integrated it in the proper way.

before upgrading to ionic3, the text value
is still appeared in ion-select

The theme might need a different way of integration with ionic 3, check the docs for it.

Custom themes sometimes use special CSS and SASS tweaks that work only for that particular layout. I think your best first step is to start a blank project and drop your ion-select html there and see what happens. That way you can be sure if there’s an issue with your code, or if it’s just something special with that theme.

1 Like

thanks and let me try