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>

Problem with the reaction on select click in Blackberry Browser
#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.

#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