How to set this up as modal in Vue?

[JuanDeLeon]

Most likely a question, not a bug. Nice plugin btw. I'm wondering how I can set this up to work as a modal in nativescript-vue?

I have a StackLayout within a GridLayout, and it has many elements, and put a Button and the FilterableListpicker at the very bottom. Something like this:

<GridLayout>
   <StackLayout>
   (...)
       <Button text="Choose an Item" @tap="showPicker()"></Button>

       <FilterableListpicker focusOnShow=true ref="myFilter" @canceled=""   @itemTapped="itemTapped($event)" listHeight=400 listWidth="100%" blur="light" :source="myList"   hintText="Search...">
       </FilterableListpicker>
   </StackLayout>
</GridLayout>

And this would be the function to show it.

showPicker() {
      this.$refs.myFilter.nativeView.show(?);
}

I'm not really sure what to send as a parameter ("?"), as in the docs it says it could be a Page or a GridLayout container, but where/how should I place those Page/GridLayout containers in order to make it look like a Modal? i.e. show it on top of my other elements.

Currently it will open just fine, but of course it's shown at the very bottom of the Page, where I placed it.

[davecoffin]

Hey there, its a very easy fix and just requires some basic understanding of NativeScript layouts. So in a GridLayout, anything that placed after another layout will sit on top of it. So your code should look like this:

<GridLayout>
   <StackLayout>
   (...)
       <Button text="Choose an Item" @tap="showPicker()"></Button>
   </StackLayout>
   <FilterableListpicker focusOnShow=true ref="myFilter" @canceled=""   @itemTapped="itemTapped($event)" listHeight=400 listWidth="100%" blur="light" :source="myList"   hintText="Search...">
       </FilterableListpicker>
</GridLayout>

to make a modal display over your entire Page itd be like this:

<Page>
  <GridLayout>
    <StackLayout>
      ALL YOUR PAGE CONTENT GOES HERE
    </StackLayout>
    <FilterableListPicker></FilterableListPicker>
  </GridLayout>

</Page>

in that code, the picker will display on top of the StackLayout.

[JuanDeLeon]

Oh got it, I'll give that a try. Really appreciate it!