Dropbox does not float to the forefront

[mjesteve]

Hi, first of all I think it's a great job you've done with virtual-select, it works very well.
I belong to the Apache Royale community [1] and for this year's ApacheCon I'm preparing a set of examples of integration with JS libraries. Virtual Select seemed to me a very good example to be part of the project (Echarts [2], jsCalendar [3], fullCalendar [4] are some others).

I have found some things that have not worked correctly but until I know the library well and verify that they are real errors and not errors due to lack of knowledge I am going to tell you the one that I think is the most important and that is blocking the integration: the visibility and positioning of the dropbox.

As they say that a picture is worth a thousand words....

The component on the left is a virtual-select and the one on the right is a Jewel VirtualComboBox native to Royale.
As you can see, the dropbox of the virtual-select stays inside the parent container, it doesn't float to the foreground, which causes it to be cut off. The same behaviour is reproduced with keepAlwaysOpen=false:

I don't come from the Js-CSS world and this is a bit too big for me.... :P
Is there any chance that the dropbox would not be displayed inline?

In the case of the Jewel VirtualComboBox the dropbox is created as a layer in the first view level, which ensures that its display is always in the foreground, floating above any other layout component.
If this were a feasible option for you, would it be a possible solution? And if not... Can you think of a solution?

Thank you very much for your attention and congratulations for this great component.

Hiedra

[mjesteve]

Just to add another example... this time with the display priority:

If you notice, the dropbox in the top select is below the fixed dropbox. This time it has to do with the z-index. The fixed dropbox has z-index=1 and the top dropbox "also". Could you leave z-index=1 when it is fixed and z-index=2x when it is floating?

[sa-si-dev]

@mjesteve Thank you for considering this plugin to use in your project.

1. This issue is happing because the plugin is rendered inside an element that has overflow hidden or scroll property. To fix this, dropbox needs to be rendered at the end of the body element instead of inside the virtual select wrapper.

2. I will increase the default z-index of floating dropbox as you suggested. FYI we can set z-index as we want with the property zIndex on initialization.

Will implement the above items in the future release.

[mjesteve]

Thank you very much sa-si-dev.
Yesterday I started to set up the development environment with vsCode to be able to do debug tests but I still don't have it. Is there any document about this in the repository?

Thanks for your interest.

Hiedra

[sa-si-dev]

Thank you very much sa-si-dev.
Yesterday I started to set up the development environment with vsCode to be able to do debug tests but I still don't have it. Is there any document about this in the repository?

Thanks for your interest.

Hiedra

Please check here

[mjesteve]

Thx.

[sa-si-dev]

@mjesteve this feature is available in the release v1.0.15

Use dropboxWrapper: 'body' property to avoid dropbox hiding.

[mjesteve]

I will try it, thank you very much.

[mjesteve]

It works very well:

I will definitely incorporate it into my projects ;)
Thanks sa-si-dev

[sa-si-dev]

It works very well:

I will definitely incorporate it into my projects ;)
Thanks sa-si-dev

Thank you