Missing text value in ionic-select

Ionic Framework ionic-v3
1

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

Screenshot_1502300922
Screenshot_1502300922.png719×1076 22.1 KB

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-item>
    <ion-label>Gender</ion-label>
    <ion-select>
      <ion-option value="f">Female</ion-option>
      <ion-option value="m">Male</ion-option>
    </ion-select>
  </ion-item>

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": [
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-statusbar",
    "cordova-plugin-device",
    "cordova-plugin-splashscreen",
    "ionic-plugin-keyboard"
],
"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": [
        "android"
    ]
}}
2

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.

3

Hi Bro, here it is !

Capture
Capture.PNG1087×512 10.6 KB

4

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.

5

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.

6

I used ioncity theme from ionic market. thanks

7

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

8

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

9

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

10

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
11

thanks and let me try