peterstaev / nativescript-drop-down Goto Github PK

I want to set default item for Android
although my code looks like this
<DropDown #dd [items]="genders" [selectedIndex]="defaultIndex" (selectedIndexChange)="onchange(dd.selectedIndex)"></DropDown>
Android UI looks empty, has no default value like the image

IOS works fine with the default value

For some reason I'm unable to figure out how to make this work with Angular2.
I've followed the instructions in the readme file which were pretty straight forward.
But after using the component in the view it's not showing any thing.

I'm using the sample-Groceries app https://github.com/NativeScript/sample-Groceries
as my nativescript playground.

Any idea?

function pageLoaded(args)
{
var page = args.object;
//dropDownID Change your dropdown id.
var dropDown= page.getViewById("dropDownID");
dropDown._onSelectedIndexPropertyChanged= () => {
//here add your function or code..
};

}
exports.pageLoaded = pageLoaded;

item._getItemId is not a function on dropdown use in my xml file.

here is the xml and js file code respectively:

            <dd:DropDown icon="res://ic_overflow" items="{{ items }}" selectedIndex="{{ selectedIndex }}" position="right" />

var items = new observableArray.ObservableArray();

for (var loop = 0; loop < 20; loop++)
{
    items.push("Item " + loop.toString());
}
pageData.set("items", items);
pageData.set("selectedIndex", 15);
pageData.set("ScrollView", scrollView);

page.bindingContext = pageData;

the code below doesn't seem to change the color of the text.

.drop-down{
  text-align: center;
  color: black;
}

Hello,

I saw that there is an incompatibility between dropdown plugin and WebPack plugin.

The error you get is "Trying to link invalid 'this' to a Java object".

If i remove the plugin everything seems to work.

How do I style the button that creates the drop-down? Or even use a StackLayout or something else that initiates the drop-down?

How to prevent typing in IOS dropdown? Can I disable the input somehow?

Is there a trick to getting the "hint" to stay visible until an user has interacted with the DropDown? In my tests, the hint is immediately hidden as soon as I set the items property.

I've tried both declarative and imperative binding:

<dd:DropDown items={{ myItems }} hint="Choose one..." id="ddTest" />
OR
let dd = page.getViewById("ddTest");
dd.items = myItems;

I see the hint on the screen briefly, but it is quickly replaced with the first item from the bound list (before any user interaction). Any ideas?

FWIW, I'm on iOS and I'm using the ValueList/IValueItem approach described in the docs.

When Dropdown is used inside Repeater (probably inside ListView as well) selected item is not shown on iOS until I pick one manually.

main-page.xml:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
      navigatingTo="onNavigatingTo"
      xmlns:dd="nativescript-drop-down">
    <Repeater items="{{ myItems }}">
        <Repeater.itemTemplate>
            <StackLayout>
                <Label text="{{ itemIndex }}" />
                <dd:DropDown items="{{ items }}" selectedIndex="{{ selectedIndex }}" />
            </StackLayout>
        </Repeater.itemTemplate>
    </Repeater>
</Page>

app.js:

var application = require("application");
application.start({ moduleName: "main-page" });

main-page.js:

var createViewModel = require("./main-view-model").createViewModel;
function onNavigatingTo(args) {
    var page = args.object;
    page.bindingContext = createViewModel();
}
exports.onNavigatingTo = onNavigatingTo;

main-view-model.js:

var Observable = require("data/observable").Observable;
function createViewModel() {
    var viewModel = new Observable();
    viewModel.myItems = [
        {
            itemIndex: 'First Repeater Item:',
            items: ['zero', 'one', 'two', 'three'],
            selectedIndex: 0
        },
        {
            itemIndex: 'Second Repeater Item:',
            items: ['zero', 'one', 'two', 'three'],
            selectedIndex: 1
        },
        {
            itemIndex: 'Third Repeater Item:',
            items: ['zero', 'one', 'two', 'three'],
            selectedIndex: 2
        }
    ]
    return viewModel;
}
exports.createViewModel = createViewModel; 

I am really new to Nativescript, so pardon me for raising this "simple" issue. :)
I wanted a more web browser feel for my dropdown, so I used the widget with GridLayout. And styled it.

Image:

XML:

 <GridLayout columns="*,auto" class="drop-down-menu" tap="{{ openDropDown }}">
        <dd:DropDown items="{{ items }}" selectedIndex="{{ selectedIndex }}" col="0" class="drop-down" />
         <Label text="&#xf078;" textWrap="false" col="1" class="font-awesome" />
</GridLayout>

my view-model file so far:

...
import { DropDown } from 'nativescript-drop-down';

export class RegisterViewModel extends Observable {
    ...
    public openDropDown() {
        console.log('I was tapped’); //this works
    }
}

my code-behind find file (.ts) so far:

...
import { RegisterViewModel } from '../../viewmodels/register/register-view-model';

export function pageLoaded(args: EventData) {
    let page = <Page>args.object;
    page.bindingContext = new RegisterViewModel;
}

I want the openDropDown function on the GridLayout to open the dropdown widget.
That is, the whole GridLayout area should be able to open the dropdown menu, including the font-icon.
I know there is an open() method in the DropDown class, but I don’t know how to go about implementing it.
I’d really appreciate any help with making this work.

If I use this code

let dd = page.getViewById<DropDown>("dd"); let itemSource = new ValueList([{ ValueMember: "FL", DisplayMember:"Florida" }, { ValueMember: "MI", DisplayMember:"Michigan" }]); dd.items = itemSource;

then I get a list of objects and not a list of DisplayMembers

Hey,

currently the drop-down.android.js contains:

    DropDown.prototype._onHintPropertyChanged = function (data) {
        this.android.getAdapter().notifyDataSetChanged();
    };

the check if this._android exists is missing:

    DropDown.prototype._onHintPropertyChanged = function (data) {
        if (!this._android || !this._android.getAdapter()) {
            return;
        }
        this.android.getAdapter().notifyDataSetChanged();
    };

would be great, if you could add it to https://github.com/PeterStaev/NativeScript-Drop-Down/blob/master/drop-down.android.ts#L120

Not having this check results in only the first hint being rendered and of there is more than one drop-down, the others don't get their hint.
Also this ugly exception occurs:

JS: EXCEPTION: Error in components/filmfilterbar/filmfilterbar.html:17:18
JS: ORIGINAL EXCEPTION: TypeError: Cannot read property 'getAdapter' of undefined
JS: ORIGINAL STACKTRACE:
JS: TypeError: Cannot read property 'getAdapter' of undefined
JS: at DropDown._onHintPropertyChanged (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/nativescript-drop-down/drop-down.js:111:21)
JS: at onHintPropertyChanged (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/nativescript-drop-down/drop-down-common.js:37:12)
JS: at DropDown.DependencyObservable._onPropertyChanged (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/ui/core/dependency-observable.js:211:13)
JS: at DropDown.Bindable._onPropertyChanged (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/ui/core/bindable.js:73:45)
JS: at DropDown.ProxyObject._onPropertyChanged (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/ui/core/proxy.js:45:45)
JS: at DropDown.View._onPropertyChanged (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/ui/core/view-common.js:625:45)
JS: at DropDown.DependencyObservable._setValueInternal (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/ui/core/dependency-observable.js:298:18)
JS: at DropDown.DependencyObservable._setValue (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/ui/core/dependency-observable.js:138:14)
JS: at DropDown.Object.defineProperty.set as hint
JS: at ViewUtil.setPropertyInternal (/data/data/org.nativescript.dehudbiff/files/app/tns_modules/nativescript-angular/view-util.js:201:32)
JS: ERROR CONTEXT:
JS: [object Object]

My xml:

        <DropDown #ddLanguage
                  row="0"
                  col="7"
                  hint="{{hintLanguages}}" //this
                  [hint]="hintLanguages"  // or that
                  [items]="languages"
                  [selectedIndex]="selectedIndexLanguages"
                  (selectedIndexChange)="onLanguageChanged(ddLanguage.selectedIndex)"
                  class="filterbar-selection"
        ></DropDown>

Thanks :)

I am not sure if there is a way.
But I cannot set font-size or padding on text-field

if i build up the ObservableArray with local data it`s fine, however if i am to pass an empty ObservableArray and populate it later i end up with all blank values on the dropdown.

var modelArray = new ObservableArray();

anotherObservable.on(Observable.propertyChangeEvent, function (data) {
  for (var item in data){
     modelArray.setItem(data[item].id, data[item].name)
  }
});

this.set('dropdown', modelArray)

Hello,

So i am doing dinamyc dropdown generation. The dropdowns themselves generate perfectly, however selectedIndex acts really weird. They just randomly reset themselves, or remember previous selections( i need unique for each dropbox ).

<StackLayout col="0" row="2">
      <ListView [items]="categoryService.bseCategoryNamesArray | async">
        <template let-item="item" let-i="index">
          <GridLayout>
            <DropDown backroundColor="red" #dd [items]="item" [selectedIndex]="categoryService.baseCategorySelected[i]" (selectedIndexChange)="onchange(dd.selectedIndex, i)"></DropDown>
          </GridLayout>
        </template>
     </ListView>
</StackLayout>

and
categoryService.baseCategorySelected[i] Contains {"0": 0, "1": 0}, even tho i change the selected index, the indexes still show values 0 all the time. But onChange event shows correct selectedIndexes.

So how would one make this work?

I want to get the value or let say 'id' of the item that I select from dropdown. I've tried using onPropertyChange method of nativescript but this doesn't fulfill what I want. Every time I select any item it returns me the index position of that item. Any idea how can I get the text or other details of the selected item like we do in jquery's onchange function.

Hi,
Is it possible to show witch item is selected ?
Change its color for instance ?
like -> item1
item2 (colored)
item3

Thanks

This may be more of an enhancement than an issue, but is it possible to style the list popup with CSS? If not, is their another method in which I can slight update the styling of the popup?

I have an issue when I call DropDown control from .ts file like this.

import { DropDown } from "nativescript-drop-down";

text-align css property doesn't work on iOS.

<dd:DropDown items="{{ items}}" selectedIndex="{{ index }}" class="drop-down" />

css:

.drop-down {
    background-color: #fff;    /* works */
    horizontal-align: right;     /* works */
    vertical-align: center;      /* works */
    text-align: center;            /* doesn't work */
    width: 100;                      /* works */
    height: 36;                      /* works */
}

Hi, I have the next error, this is my main.ts:

import {nativeScriptBootstrap} from "nativescript-angular/application";
import {AppComponent} from "./app.component";
import {registerElement} from "nativescript-angular/element-registry";
import {NS_HTTP_PROVIDERS} from "nativescript-angular/http";

registerElement("DropDown", () => require("nativescript-drop-down/drop-down").DropDown);
nativeScriptBootstrap(AppComponent, [NS_HTTP_PROVIDERS]);

Its my app.component.html:

<RadSideDrawer>

    <StackLayout tkDrawerContent class="sideStackLayout" width="300">

        <StackLayout class="sideTitleStackLayout" horizontalAlignment="center">

            <Label text="&#xf007;" class="font-awesome circle" verticalAlignment="center"></Label>

            <Label text="Admin" class="sideLabel"></Label>

        </StackLayout>

        <Border borderRadius="1" borderWidth="1" borderColor="#808080"></Border>

        <StackLayout orientation="horizontal">

            <Label text="&#xf0c0;" class="font-awesome sideIcon" 

[class.selected]="selectedAgentWindow"></Label>

            <Label text="{{ 'go_to_agent_dash' | L }}" class="font-awesome sideLabel " 
[class.selected]="selectedAgentWindow" (tap)="navigate('/agent',1)" ></Label>

        </StackLayout>

        <StackLayout orientation="horizontal">

            <Label text="&#xf02c;" class="font-awesome sideIcon" 
[class.selected]="selectedQueueWindow"></Label>

            <Label text="{{ 'go_to_queue_dash' | L }}" class="font-awesome sideLabel " 
[class.selected]="selectedQueueWindow" (tap)="navigate('/dash',2)"></Label>

        </StackLayout>

        <Border borderRadius="1" borderWidth="1" borderColor="#808080"></Border>

        <StackLayout orientation="horizontal">

            <Label text="&#xf08b;" class="font-awesome sideIcon" 
[class.selected]="selectedLogoutWindow"></Label>

            <Label text="{{ 'logout' | L }}" class="font-awesome sideLabel " 
[class.selected]="selectedLogoutWindow" (tap)="navigate('/login',3)"></Label>

        </StackLayout>

    </StackLayout>

    <StackLayout class="stack-container" tkMainContent>

        <router-outlet></router-outlet>

    </StackLayout>

</RadSideDrawer>

Its my app.component.ts, where the error is, I don't know how to "import" the DropDown element:

import {Component, OnChanges, ElementRef, ViewChild, Inject, OnInit, ChangeDetectorRef} from "@angular/core";
import {NS_ROUTER_DIRECTIVES, RouterExtensions } from "nativescript-angular/router";
import {ObservableArray} from "data/observable-array";
import { ROUTER_DIRECTIVES } from '@angular/router'
import { View } from "ui/core/view";
import { RadSideDrawer } from "nativescript-telerik-ui/sidedrawer";
import { Page } from "ui/page";
import { ActionItem } from "ui/action-bar";
import sideDrawerModule = require('nativescript-telerik-ui/sidedrawer');
import * as ObservableModule from "data/observable";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui/sidedrawer/angular";
import applicationSettings = require('application-settings');

@Component({
  selector: "main",
  templateUrl: "app.component.html",
  directives: [NS_ROUTER_DIRECTIVES, ROUTER_DIRECTIVES],
  styleUrls: ['./drawer-menu.component.css', './app-common.css']
})

export class AppComponent extends ObservableModule.Observable implements OnInit {
    public counter: number = 50;
    public selectedAgentWindow=false;
    public selectedQueueWindow=false;
    public selectedLogoutWindow=false;

    constructor( @Inject(Page) private page: Page, private _changeDetectionRef: ChangeDetectorRef,
    private route : RouterExtensions) {
        super();
    }

    ngOnInit() {

    }

    navigate(page:string,numberPage:number) {
        if(numberPage==1) {
            this.selectedAgentWindow=true;
            this.selectedQueueWindow=false;
            this.selectedLogoutWindow=false;
        }
        else if(numberPage==2) {
            this.selectedAgentWindow=false;
            this.selectedQueueWindow=true;
            this.selectedLogoutWindow=false;
        }
        else {
            this.selectedAgentWindow=false;
            this.selectedQueueWindow=false;
            this.selectedLogoutWindow=true;
        }

        this.drawer.closeDrawer();
        this.route.navigate([page]);
    }

    @ViewChild(RadSideDrawerComponent) public drawerComponent: RadSideDrawerComponent;
    private drawer: SideDrawerType;

    ngAfterViewInit() {
        this.drawer = this.drawerComponent.sideDrawer;
        this._changeDetectionRef.detectChanges();
    }

    ngAfterViewChecked() {                              // este revisa si el menu debe activarse, si el token es vacio no lo hara
        let token = applicationSettings.getString("loginToken", "");
        if(token !== "") {
            this.drawer.gesturesEnabled = true;
        }
        else {
            this.drawer.gesturesEnabled = true;
            //this.drawer.gesturesEnabled = false;
        }
    }

    logout() {
        this.drawer.closeDrawer(); //ponerlo xq sino se pega
        this.drawer.gesturesEnabled = false;
        applicationSettings.remove("loginToken");
        this.route.navigate(['/login'],{clearHistory : true});
    }

    goAgentStatistics() {
        this.drawer.closeDrawer(); //ponerlo xq sino se pega
        this.route.navigate(['/agent'],{clearHistory : true});
    }

    goQueueStatistics() {
        this.drawer.closeDrawer(); //ponerlo xq sino se pega
        this.route.navigate(['/dash'],{clearHistory : true});
    }
}

I clip a screenshoot too

Hey Guys,

im running an angular-nativescript project and tried to use this module. I just added the example code, but it just shows:

TypeError: Could not load view for: DropDown.TypeError: Attempted to assign to readonly property.

I tried to change the register element to another element-name as DropDown and i tried to remove the "use strict"; in the module code, but nothing helped.

my versions:

tns-ios: 2.1.1,
tns-core-modules: 2.1.0,
nativescript-angular: "next"

I hope you can help me out :)

Hi,

I'm not able to set the text color of the main select box under Android 7 (testing on emulator). I get this:
http://2.1m.yt/ZZ6F4Nx.png

Drop-down items apply the style:
http://1.1m.yt/Z8OsTAh.png

The select box is well styled under iOS:
http://4.1m.yt/NgtUBE.png

My code:

View:

<Page xmlns="http://www.nativescript.org/tns.xsd" xmlns:dd="nativescript-drop-down" loaded="onload">
   <GridLayout class="padding" rows="auto, auto, auto, auto, auto, auto, auto, auto, auto" columns="auto, *">
      <!-- some other UI components here... -->
      <dd:DropDown items="{{ peoplecount }}" selectedIndex="{{ numpeople }}" selectedIndexChanged="changePeopleCount" horizontalAlignment="right" row="3" col="1" />
      <!-- some other UI components here... -->
   </GridLayout>
</Page>

CSS:

DropDown {
   width: 60;
   height: 40;
   margin-bottom: 4;
   color: #333;
   background-color: #eee;
   border-color: #eee;
   border-width: 1;
   border-radius: 5;
   text-align: center;
}

Environment:

$ node --version
v6.9.1
$ tns --version
2.4.2

hi,

I have tried (selectedIndexChange) event which is specified in the agular documentation.which is not working nativescript js code.how the get event call for onselect.

Hi!
I was wondering if it was possible to change the background color of just the drop down pop up.

Setting background-color either through CSS or property has no effect. NativeScript/NativeScript#2502

I don't know how to close this control, either after selecting and item or with the "done" button, I just keeps open and I have to close the app. Android is fine though.

Thanks

Hi when I go to a page that has the DropDown element, I get this error. I am quite new to this, any help will be appreciated:

 EXCEPTION: Uncaught (in promise): Error: Error in pages/home/home.html:4:8 caused by: Could not load view for: DropDown.Error: com.tns.NativeScriptException: Failed to find module: "nativescript-drop-down/drop-down", relative to: app/tns_modules/
JS:     com.tns.Module.resolvePathHelper(Module.java:159)
JS:     com.tns.Module.resolvePath(Module.java:60)
JS:     com.tns.Runtime.callJSMethodNative(Native Method)
JS:     com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1022)
JS:     com.tns.Runtime.callJSMethodImpl(Runtime.java:907)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:895)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:879)
JS:     com.tns.Runtime.callJSMethod(Runtime.java:871)
JS:     com.tns.gen.org.nativescript.widgets.Async_CompleteCallback.onComplete(org.nativescript.widgets.Async$CompleteCallback.java)
JS:     org.nativescript.widgets.Async$Http$HttpRequestTask.onPostExecute(Async.java:465)
JS:     org.nativescript.widgets.Async$Http$HttpRequestTask.onPostExecute(Async.java:379)
JS:     android.os.AsyncTask.finish(AsyncTask.java:651)
JS:     android.os.AsyncTask.-wrap1(AsyncTask.java)
JS:     android.os.AsyncTask$InternalHandler.handleMessage(AsyncTask.java:668)
JS:     android.os.Handler.dispatchMessage(Handler.java:102)
JS:     android.os.Looper.loop(Looper.java:148)
JS:     android.app.ActivityThread.main(ActivityThread.java:5417)
JS:     java.lang.reflect.Method.invoke(Native Method)
JS:     com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
JS:     com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

Home.html:

<StackLayout>
    <GridLayout rows="auto, auto, *" columns="auto, *">
        <TextField hint="Height" keyboardType="text" autocorrect="false" autocapitalizationType="none" [(ngModel)]="height" class="input-text-box" row="0" colSpan="1"></TextField>
        <TextField hint="Age"  keyboardType="text" autocorrect="false" autocapitalizationType="none" [(ngModel)]="age" class="input-text-box" row="0" colSpan="1"></TextField>
        <DropDown #dd backroundColor="red" [items]="items" [(ngModel)]="index" row="0" colSpan="2"></DropDown>
    </GridLayout>
</StackLayout>

Home.component.ts

import {Component, OnInit} from "@angular/core";

import {Http} from "@angular/http";
import {UserService} from "../../service/UserService/user.service";
import {Page} from "ui/page";
import {DropDown} from "nativescript-drop-down/drop-down"

@Component({
    selector: "home",
    templateUrl: "pages/home/home.html",
    styleUrls: ["pages/home/home.common.css", "pages/home/home.css"]
})
export class HomeComponent implements OnInit{
    private items: Array<any> = ["123455","abcdef","!@#$%", "}{POIU"];
    private index:number;
    private height: number;
    private age: number;

    constructor(private authHttp: Http, private userService: UserService, private page: Page) {
    }
    
    ngOnInit(){
        this.page.actionBarHidden = true;
    }
    
}

Title pretty much explains my problem.

Here is my example:

I would like to repeat ie 5 addresses entry where I would like to use 2 dropdowns. One is for country, another is for State. Also when Country item changed, an event got fired and populate the state dropdown.

// xml
// repeat ie 5 address
<Repeater.itemTemplate>
:
<dd:DropDown items="{{ $parents['Page'].countryList }}" selectedIndex="{{ selectedCountryIndex }}" />
<dd:DropDown items="{{ $parents['Page'].stateList }}" selectedIndex="{{ selectedStateIndex }}" />
:
</Repeater.itemTemplate>

// code:
class Address {
  street:string;
  city:string;
  state:string;
  country:string;
  zip:string;
}

class MyObject extends observable.Observable {
:
  RootObject.addresses: Array<Address>;
:
}

Please advice. Appreciate if there is example.

Is it possible to setPrompt ? (this._android.setPrompt("Select your favorite ... ") )

Thanks a lot

In the package.json file of the plugin version 1.2.2 there is:

"nativescript": {
    "platforms": {
      "ios": ">=1.5.0",
      "android": ">=1.5.0"
    }
  }

which is not a valid version.

The same for https://github.com/PeterStaev/NativeScript-Grid-View/ plugin.

FYI: NativeScript/nativescript-cli#1530

There is no way to reset the drop down where the hint is shown and items are refreshed and waiting to be refreshed.

Hey,

I am using this plugin with angular2 and typescript.

                            <DropDown 
                                #dd1
                                class="dropdown input"
                                hint="Select"
                                [items]="categoryFlat" 
                                [selectedIndex]="selectedIndex" 
                                (selectedIndexChange)="onChange(dd1.selectedIndex)"  >

Is there a way where i can reset the dropdown to the hint & not to any index.
Thank you.

Hi, why i get this issue? (Only i get on ios build)

Oct 10 08:24:33 MacBook-Pro arvixstay[60076]: [] nw_connection_get_connected_socket_block_invoke 2 Connection has no connected handler
Oct 10 08:24:33 MacBook-Pro arvixstay[60076]: PAC stream failed with
Oct 10 08:24:33 MacBook-Pro arvixstay[60076]: [] nw_proxy_resolver_create_parsed_array PAC evaluation error: kCFErrorDomainCFNetwork: 2
Oct 10 08:24:43 MacBook-Pro arvixstay[60076]: [] nw_connection_get_connected_socket_block_invoke 4 Connection has no connected handler
Oct 10 08:24:43 MacBook-Pro arvixstay[60076]: PAC stream failed with
Oct 10 08:24:43 MacBook-Pro arvixstay[60076]: [] nw_proxy_resolver_create_parsed_array PAC evaluation error: kCFErrorDomainCFNetwork: 2
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 1 0x1030f6379 NativeScript::FFICallbackNativeScript::ObjCMethodCallback::ffiClosureCallback(ffi_cif, void, void, void)
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 2 0x10376351e ffi_closure_unix64_inner
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 3 0x103763ed2 ffi_closure_unix64
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 4 0x104803028 _UIGestureRecognizerSendTargetActions
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 5 0x104800af7 _UIGestureRecognizerSendActions
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 6 0x1047ffd83 -[UIGestureRecognizer _updateGestureWithEvent:buttonEvent:]
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 7 0x1047ebe56 _UIGestureEnvironmentUpdate
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 8 0x1047eb89b -[UIGestureEnvironment _deliverEvent:toGestureRecognizers:usingBlock:]
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 9 0x1047eaa7e -[UIGestureEnvironment _updateGesturesForEvent:window:]
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 10 0x1043297ad -[UIWindow sendEvent:]
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 11 0x1042d6a33 -[UIApplication sendEvent:]
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 12 0x104ac8b6d __dispatchPreprocessedEventFromEventQueue
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 13 0x104ac1817 __handleEventQueue
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 14 0x106a3d311 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION*
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 15 0x106a2259c __CFRunLoopDoSources0
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 16 0x106a21a86 __CFRunLoopRun
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 17 0x106a21494 CFRunLoopRunSpecific
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 18 0x1099dea6f GSEventRunModal
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 19 0x1042b8f34 UIApplicationMain
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 20 0x103763d2d ffi_call_unix64
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: 21 0x1107b7350
Oct 10 08:25:18 MacBook-Pro arvixstay[60076]: file:///app/tns_modules/ui/builder/builder.js:162:56: JS ERROR Error: Building UI from XML. @file:///app/views/lodging/create/lodging-reservations.xml:31:17
↳Module '/Users/jeyachanthurujeyarathnam/Library/Developer/CoreSimulator/Devices/BF5311BD-42C8-4F22-98E5-8EB9EEB72577/data/Containers/Bundle/Application/D9000631-89A1-41EE-BA07-BE1883CBDA3D/arvixstay.app/app/tns_modules/nativescript-drop-down' not found for element 'nativescript-drop-down:DropDown'.
↳UIScreen.mainScreen is not a function. (In 'UIScreen.mainScreen()', 'UIScreen.mainScreen' is an instance of UIScreen)
Oct 10 08:25:18 MacBook-Pro com.apple.CoreSimulator.SimDevice.BF5311BD-42C8-4F22-98E5-8EB9EEB72577.launchd_sim58588: Service exited due to Segmentation fault: 11

Maybe my problem stems from a misunderstanding of nativescript but here we go:

I have the Drop-Down located in my actionbar and want it to change color when I'm switching tabs in my View.

I have created a binding of the backgroundColor property in xml like this:

<dd:DropDown id="lockList" backgroundColor="{{dropDownColor}}" [...] />

However, this seems to only take effect after I have selected an item from the dropDown.

See screenshots below:

Now I'm changing tabs:

Notice how it worked for the actionbar but not the drop down.

After selecting an item from the list (not selecting anything reverts to previous state), it looks as expected:

Changing the color this way works for the actionbar (as you can see), why doesn't it for the drop down?

Kind regards,

Alexej

From @hvadotnarola here:

Hey is there method to be called upon opening popup and on selection(Closing) ?

Is there a way one can reset the index on the dropdown back to 0 index?

Thanks

After updating to Nativescript 2.3.0 and Xcode 8, I get the following error:

TypeError: UIScreen.mainScreen is not a function. (In 'UIScreen.mainScreen()', 'UIScreen.mainScreen' is an instance of UIScreen)

Solution - change from using a method:

var applicationFrame = UIScreen.mainScreen().applicationFrame;

to a property

var applicationFrame = UIScreen.mainScreen.applicationFrame;

Like this: https://harvesthq.github.io/chosen/#optgroup-support

It would be useful to have a means of dropping down the results list without having to click on the arrow (which easily gets mixed up with the click-to-select an item in the list.)

Hello,

Is there a way to style the look of the selected value? I tried applying css classes and also inline styles, but nothing worked.

I saw a closed ticket that indicates that this is possible, but in my case, it does not work. I am developing for iOS using version 1.2.5. I am defining the drop down like this:

<dd:DropDown items="{{ accountTypes }}" selectedIndex="{{ customer.AccountType }}" class="ddl" /> .ddl { font-size: 10; color: #a8b4b9; font-weight: bold; }

Thank you.

Let's add the option to allow users to configure which initial component should be displayed. Right now a UITextField on iOS is used, but in every case I've wanted to use this plugin, a UILabel would be more appropriate or even a GridLayout with a Label and a optional Label which could be place on the left or right to display a down arrow icon possibly.

From @hvadotnarola

For iOS should be relatively easy to add, but for android will require some hacks http://stackoverflow.com/questions/13877681/how-can-i-add-a-hint-to-the-spinner-widget

How to styling this dropdown ?
Because i am use standart style nativescript not working.
Thanks

I add "nativescript-drop-down": "1.2.5" into my root package.json file but it never seems to want to load. My project is a javascript project - not typescript. I even added the devDependencies for typescript, but still no go. Any ideas?

Hi Peter,
I have problem which is followed as below,

node_modules/nativescript-drop-down/drop-down.d.ts(31,14): error TS2304: Cannot find name 'UITextField'.

node_modules/nativescript-drop-down/drop-down.d.ts(32,18): error TS2503: Cannot find namespace 'android'.

May I know your suggestion?

Thanks
Chan Myae Thu

Hey great plugin, just wondering if it's possible to make it non-editable in the input field and only have the user select from the dropdown?