PeterStaev / NativeScript-Drop-Down

A NativeScript DropDown widget.
Apache License 2.0
105 stars 65 forks source link

Label above Dropdown becomes invisible after opening Dropdown #228

Closed VukMNE closed 4 years ago

VukMNE commented 4 years ago

First of all, Peter, I want to thank you for making this NativeScript plug-in. I was looking for a nativescript plugin that works as a Spinner widget on Android, and this one works very well.

However, I came across this weird behaviour. For some reason, label element that I have placed above dropdown, disappears after opening the dropdown. I will provide the code that I am using, and I would be very happy if you could tell me if something needs to be corrected.

Here are the screenshots of the issue:

Image #1 (Label "Language" is displayed above Dropdown, as it should) Screenshot_20191025-095046_Cashback Test

Image #2 (Label becomes invisible) Screenshot_20191025-095057_Cashback Test

And here is the code that I am using:

component.html

<StackLayout class="input-field mv-12" width="100%" orientation="vertical">
            <Label class="label" [text]="'language' | translate"></Label>
            <StackLayout class="dropdown-container mv-12">
                    <DropDown
                    itemsTextAlignment="left" 
                    itemsPadding="12"
                    [items]="languages"
                    [(ngModel)]="langIndex" 
                    (selectedIndexChanged)="onLangChanged($event)"
                    ></DropDown>
            </StackLayout>

        </StackLayout>

component.ts

languages: Array<string> = [];
  langIndex: number;

...

ngOnInit() {
    this.languages.push("English");
    this.languages.push("Montenegrin");
    this.languages.push("Russian");
    this.languages.push("German");
    this.langIndex = 0;
}

...

onLangChanged(event: any) {
    console.log(event);
  }
PeterStaev commented 4 years ago

Hey @VukMNE , I cannot simulate this on my end. May be the problem has something to do with your translate pipe. I suggest you try to remove the pipe and see if that will fix the problem. Also the drop down doesn't change anything outside it's visual element, so I do not see a way this problem to be caused by the widget.

VukMNE commented 4 years ago

Hey @VukMNE , I cannot simulate this on my end. May be the problem has something to do with your translate pipe. I suggest you try to remove the pipe and see if that will fix the problem. Also the drop down doesn't change anything outside it's visual element, so I do not see a way this problem to be caused by the widget.

The problem is I was using the class called label here, which was causing this weird behavior:

<Label class="label" [text]="'language' | translate"></Label>

After I removed the class, this bug didn't happen again...