Select dropdown Ionic don't show text

Question

I am developing an application in Ionic 1.7.

I have a select menu and I am facing a problem with it.

For simplification, my code is like the documentation

  <label class="item item-input item-select">
    <div class="input-label">
      Lightsaber
    </div>
    <select>
      <option>Blue</option>
      <option selected>Green</option>
      <option>Red</option>
    </select>
  </label>

http://ionicframework.com/docs/components/#select

It works well with most devices, in iOS and Android. It shows the native select menu, and everything is OK.

But I have a problem with one device, a Huawei MediaPad M2. Its my corporate tablet and this app have to work here.

The problem is, that with any code that involves select menus, the text of the options don't show. The number of the elements are correct, and I think that the labels are OK too, because if I increase the size of the labels, the box grows too.

Screenshot for reference

If I open the samples in the default browser, It works, the boxes are the same, but the labels show with black text, which don't happens in the ionic app.

I tried to remove all the CSS of ionic, add all CSS that may work, update the webview app of android, update the tablet, and nothing worked.

I tried to create a new sample app with only a select menu, and this happens too.

Any ideas, or workarounds, about how can I fix this, or force to open the native select menu?

Thanks!

Answer 1

I got the correct answer from here: Apache Cordova Android 5.0 Select Box Option color

Locate AndroidManifest.xml in platforms/android and look for this block:

<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.Light.NoTitleBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

The key setting is: android:theme="@android:style/Theme.Light.NoTitleBar"

When I had the same problem as you, this was set to: "android:theme="@android:style/Theme.DeviceDefault.NoActionBar". Setting it to "Theme.Light.NoTitleBar" gave me black text on white in my select dropdowns.

Answer 2

The workaround it to use Select-box plugin. I have the same problem, and meanwhile I get the solution, I am using this plugin.

https://github.com/domiSchenk/ionic-Select-Control

Hope this helps.