Item-select not selectable in browser from within ion-content

1

When I put an item-select inside a ion-content the select box does not open in the browser. On the device it seems to work the first time - after selecting a value it’s no more openable either.

I’ve got the following situation:

<ion-content class="has-subheader">
    <div class="doc pull-left padding"></div>

    <div class="doc-meta pull-right padding-vertical padding-right list">
        <label ng-if="buttons.type.show" class="item item-custom item-select">
            <select ng-model="doc.type.key" ng-blur="save()" ng-options="doctype.key as ( 'doc.'+doctype.key | translate ) for doctype in types.findByKind('doc')">
                <option value=""></option>
            </select>
        </label>
        ...
    </div>
</ion-content>
2

From the docs :

  • Do not wrap <select> elements within a <label>. In most cases, browsers will not correctly open up the select’s options when tapped or clicked.

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

3

Hi Calendee

I’ve removed the label elements but without any luck.
Finally I was able to track down what exactly causes the error, but I have no idea how I fix it. Maybe you can help out (I’m currently using the nightly build, maybe it’s somehow related to this)?

This situation does NOT work

<ion-content>
    <select><option value=""></option></select>
</ion-content>

This situation does work

<ion-content scroll="false">
    <select><option value=""></option></select>
</ion-content>

Maybe some kind of z-index issue?

4

Can you put togehter a simple CodePen demo of that? If so, I can dabble with it as well. We may need to open an issue for the devs, but need a sample to start with.

5

I’ve put together a CodePen demo as suggested - everything’s working in the pen (at least, the options are visible):

During creation of the CodePen I’ve included the JavaScript and CSS files from GitHub directly,
so I gave them a try in my local environment and voilà things have started working!

So when I include the following in my head it’s working (at least I’m able to see the available options):

<link href="https://rawgit.com/driftyco/ionic-bower/master/css/ionic.css" rel="stylesheet" />
<script src="https://rawgit.com/driftyco/ionic-bower/master/js/ionic.bundle.js"></script>

But when I include the following it doesn’t:

<link href="lib/ionic/css/ionic.css" rel="stylesheet" />
<script src="lib/ionic/js/ionic.bundle.js"></script>

I’ve installed ionic originally using bower with the following command:

bower install driftyco/ionic-bower#master --save

I’ve just run the command once again right now and ionic seems to be updated,
as I can see the available options too in my local environment.

However, for some reason the value is not changeable - which is also true for the Pen.
Any idea how this can be fixed?

PS: Just noticed the ion-infinite-scroll has also stopped working :frowning:

6

My codepen doesn’t work either. @adam checked in a whole bunch of refactoring - he fixed a bunch of select issues. It doesn’t work in chrome but works in Safari. I can confirm that it was working in the nightly a few days ago(v1.0.0-beta.1-nightly-1717). I am on 1768 now.

BTW, infinite-scroll seems to be fine in my app.

-ixix

7

That sample seemed very “non-ionic” to me. I couldn’t see how Ionic was included in it.

I’m not quite sure what part of the select seems to be not working for you.

I did some tests on “select” in the browser and on device. On device in Beta 1 and Nightly, all seems pretty good. However, in Beta1 selects are ugly on iOS. They are perfect on Nightly.

In Chrome, with the Nightly, the select causes a flicker because it opens, closes, opens in about 500ms.

I’ve opened this Issue : https://github.com/driftyco/ionic/issues/1207

8

I’ve noticed this behaviour when I built the app for my Blackberry 10 device. I know that platform isn’t supported, but I figured I’d try since Cordova supports it. Other than a few other issues that were relatively simple to solve (the href whitelist had to be tweaked), everything works well, other than the selects.

Adding the scroll=false fixed it, although, I actually need scroll on of my screens!

9

can you please give more details about this? i am having the same problem. is this also solving the issue under android 2.3?

10

Hi, anyone managed to display the select element on Android 2.3 ?

11

Forget it… I’ve done popover selector for Android below 4.x and normal select for 4+ versions. Works great but I’m not sure why the popover is limited to 3 items even if there’s place for more on the screen.

12

Ive also had this issue. Works on all devices, except Android 2.3. The select populates, but is not clickable. An exmaple of one of my selects box’s is below.

<div class="item item-input item-select">
    <select 
    ng-model="selectedStoreType" 
    ng-options="v.id as v.name for (k, v) in storeTypes"
    ng-change="updateStores()"
    >
        <option value="" disabled selected>Select Store Type</option>
    </select>
</div>

and it sits somewhere below this ion-content tag

<ion-content padding="true" scroll="false" ng-controller="job">

Any help would be great!

13

Hellow
ther is any way to solve this problem on Chrome ( desktop).
My app has one admin part that i must use on PC and multiple select in ion-content with scroll enabled not work . When i disable scroll , multiple select work wothout any problem .

Thank you for your Help

14

This issue is resolved by setting overflow-scroll=“true” on ion-content

<ion-content class="content padding" overflow-scroll="true">