Select component hidden under the keyboard


#1

when I try to filter the select, the keyboard pops up and the select is being hidden under the keyboard.

in some cases when I swipe up on the remaining part of the body, the select options shows up.

how to get the select stay on top of the keyboard?


#2

There is the same problem with Ionic. In my opinion keyboard should not pop up automatically anyway. Because of this problem, I chose not to use this component as much as I liked it initially.


#3

Hi there,

On Android and iOS the keyboard should not popup automatically when the select is opened, so far I could not reproduce this happening.
Even when manually opening the keyboard, the select is pushed up correctly.
Could you share some more information on your projects (package.json, config.xml)
Are you using any cordova keyboard plugins, which might affect this?

Thanks,
Isti


#4

I don’t use anything special… here are config and package

    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="ScrollEnabled" value="false" />
    <preference name="android-minSdkVersion" value="21" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />
    <platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
        <edit-config file="*-Info.plist" mode="merge" target="NSCameraUsageDescription">
            <string>This allows us to create profile picture for your account.</string>
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryUsageDescription">
            <string>This allows you to choose picrures and images from you photo library and upload them to ACES.</string>
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
            <string>Your current location will be used to allow ACES to find direction to a tournament venue.</string>
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryAddUsageDescription">
            <string>This will allow you to save pictures and videos from ACES to your device.</string>
        </edit-config>
    </platform>
    <allow-navigation href="http://192.168.0.64:8100" />
    <allow-navigation href="http://172.31.99.39:8100" />
    <allow-navigation href="http://192.168.1.7:8100" />
    <allow-navigation href="http://10.104.4.190:8100" />
    <allow-navigation href="http://192.168.0.64:8101" />
    <allow-navigation href="http://192.168.11.30:8101" />
    <allow-navigation href="http://10.104.5.52:8100" />
    <allow-navigation href="http://169.254.120.252:8100" />
    <allow-navigation href="http://10.0.0.52:8100" />
    <allow-navigation href="http://172.20.14.239:8100" />
    <allow-navigation href="http://169.254.206.73:8100" />
    <allow-navigation href="http://169.254.184.116:8100" />
    <allow-navigation href="http://10.104.4.80:8100" />
    <allow-navigation href="http://10.104.4.119:8100" />
    <allow-navigation href="http://10.104.4.22:8100" />
    <allow-navigation href="http://172.20.10.7:8100" />
    <allow-navigation href="http://10.11.1.98:8100" />
    <allow-navigation href="http://172.31.99.40:8100" />
    <engine name="ios" spec="4.5.5" />
    <engine name="android" spec="6.3.0" />
    <plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
    <plugin name="cordova-plugin-device" spec="^2.0.2" />
    <plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.1.2" />
    <plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
    <plugin name="cordova-plugin-badge" spec="^0.8.7" />
    <plugin name="cordova-plugin-app-version" spec="^0.1.9" />
    <plugin name="cordova-plugin-screen-orientation" spec="^3.0.1" />
    <plugin name="cordova-plugin-camera" spec="^4.0.3" />
    <plugin name="cordova-plugin-inappbrowser" spec="^3.0.0" />
    <plugin name="cordova-plugin-video-editor" spec="^1.1.3" />
    <plugin name="mx.ferreyra.callnumber" spec="~0.0.2" />
    <plugin name="phonegap-plugin-push" spec="^2.1.3">
        <variable name="FCM_VERSION" value="11.6.2" />
    </plugin>
    <plugin name="cordova-plugin-document-viewer" spec="^0.9.10" />
    <plugin name="cordova-plugin-file" spec="^5.0.0" />
    <plugin name="cordova-plugin-file-transfer" spec="^1.7.1" />
    <plugin name="cordova-plugin-x-socialsharing" spec="^5.4.1" />
    <plugin name="cordova-plugin-photo-library" spec="^2.1.1">
        <variable name="PHOTO_LIBRARY_USAGE_DESCRIPTION" value="To choose photos" />
    </plugin>
    <plugin name="cordova-plugin-filepicker" spec="^1.1.5" />
    <plugin name="cordova-plugin-filechooser" spec="^1.0.1" />
    <plugin name="cordova-plugin-filepath" spec="^1.4.2" />
    <plugin name="cordova-plugin-geolocation" spec="^4.0.1">
        <variable name="GEOLOCATION_USAGE_DESCRIPTION" value="To get your current location" />
    </plugin>
    <plugin name="info.protonet.imageresizer" spec="^0.1.1" />
    <plugin name="cordova-plugin-apprate" spec="^1.4.0" />
    <plugin name="cordova-plugin-ionic-webview" spec="^1.2.1" />

{
  "name": "athletes-coaches-evaluation-system",
  "version": "0.0.1",
  "author": "ACES Tennis Management",
  "homepage": "https://www.aces-tm.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@amcharts/amcharts3-angular": "^2.1.1",
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/app-rate": "^4.16.0",
    "@ionic-native/app-version": "^4.11.0",
    "@ionic-native/badge": "^4.11.0",
    "@ionic-native/call-number": "^4.11.0",
    "@ionic-native/camera": "^4.11.0",
    "@ionic-native/core": "~4.10.0",
    "@ionic-native/document-viewer": "^4.11.0",
    "@ionic-native/file": "^4.11.0",
    "@ionic-native/file-chooser": "^4.11.0",
    "@ionic-native/file-path": "^4.11.0",
    "@ionic-native/file-picker": "^4.11.0",
    "@ionic-native/file-transfer": "^4.11.0",
    "@ionic-native/geolocation": "^4.11.0",
    "@ionic-native/image-resizer": "^4.12.2",
    "@ionic-native/in-app-browser": "^4.11.0",
    "@ionic-native/photo-library": "^4.11.0",
    "@ionic-native/push": "^4.11.0",
    "@ionic-native/screen-orientation": "^4.11.0",
    "@ionic-native/social-sharing": "^4.11.0",
    "@ionic-native/splash-screen": "~4.10.0",
    "@ionic-native/status-bar": "^4.10.1",
    "@ionic-native/video-editor": "^4.11.0",
    "@ionic/storage": "2.1.3",
    "@ngx-progressbar/core": "^4.3.0",
    "@ngx-translate/core": "^9.0.2",
    "@ngx-translate/http-loader": "^2.0.1",
    "amcharts3": "^3.21.13",
    "angular2-jwt": "^0.2.3",
    "call-number": "^1.0.1",
    "cordova-android": "6.3.0",
    "cordova-ios": "4.5.5",
    "cordova-plugin-add-swift-support": "^1.6.0",
    "cordova-plugin-app-version": "^0.1.9",
    "cordova-plugin-apprate": "^1.4.0",
    "cordova-plugin-badge": "^0.8.7",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-dialogs": "^2.0.1",
    "cordova-plugin-document-viewer": "^0.9.10",
    "cordova-plugin-file": "^5.0.0",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-filechooser": "^1.0.1",
    "cordova-plugin-filepath": "^1.4.2",
    "cordova-plugin-filepicker": "^1.1.5",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-globalization": "^1.11.0",
    "cordova-plugin-inappbrowser": "^3.0.0",
    "cordova-plugin-ionic-keyboard": "^2.1.2",
    "cordova-plugin-ionic-webview": "^1.2.1",
    "cordova-plugin-nativestorage": "^2.3.2",
    "cordova-plugin-photo-library": "^2.1.1",
    "cordova-plugin-screen-orientation": "^3.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-video-editor": "^1.1.3",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-plugin-x-socialsharing": "^5.4.1",
    "es6-promise-plugin": "^4.2.2",
    "info.protonet.imageresizer": "^0.1.1",
    "intl": "^1.2.5",
    "ionic-angular": "3.9.2",
    "ionic-img-viewer": "^2.9.0",
    "ionic-select-searchable": "^2.8.2",
    "ionic2-calendar": "^0.4.4",
    "ionicons": "3.0.0",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.21",
    "mx.ferreyra.callnumber": "~0.0.2",
    "ngx-moment": "^3.1.0",
    "phonegap-plugin-push": "^2.1.3",
    "run": "1.4.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26",
    "@mobiscroll/angular": "file:./src/lib/mobiscroll-package/mobiscroll-angular-4.4.2.tgz"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.0",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-badge": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-screen-orientation": {},
      "cordova-plugin-camera": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-video-editor": {},
      "mx.ferreyra.callnumber": {},
      "phonegap-plugin-push": {
        "FCM_VERSION": "11.6.2"
      },
      "cordova-plugin-document-viewer": {},
      "cordova-plugin-file": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-x-socialsharing": {},
      "cordova-plugin-photo-library": {
        "PHOTO_LIBRARY_USAGE_DESCRIPTION": "To choose photos"
      },
      "cordova-plugin-filepicker": {},
      "cordova-plugin-filechooser": {},
      "cordova-plugin-filepath": {},
      "cordova-plugin-geolocation": {
        "GEOLOCATION_USAGE_DESCRIPTION": "To get your current location"
      },
      "info.protonet.imageresizer": {},
      "cordova-plugin-apprate": {},
      "cordova-plugin-ionic-webview": {}
    },
    "platforms": [
      "ios",
      "android"
    ]
  },
  "config": {
    "ionic_copy": "./scripts/copy-mobiscroll-css.js"
  }
}