vSphere Web客户端的自定义插件中的AngularJS UI呈现问题

Question

We are developing user custom for vmware's vSphere web client with the help of vSphere client SDK 6.0.

We have use html-bridge (AngularJS) to develop a UI for plugin and we are facing rendering issue of UI for one specific scenario.

Image 1: This window belongs to vCenter. If I select any drop down it will not impacting the remaining part of the screen.

Image 2: This window we have created in AngularJS with the help of html-bridge.

Image 3: If I am working on our custom window and selecting any drop own which is not a part of our custom window ( They belongs to component of vCenter and I have highlighted with arrow ). Then all content of our window will get disappeared.

Can we avoid this issue?

Please advice.

Answer 1

This is an inherent problem of how Flash player shows HTML content. The HTML content you are showing in your plugin's view is nested in an IFrame which is essentially a native OS window in which your content is drawn. The Flash content of the web client is drawn in a separate native window that has a lower z-index than the IFrame window. Since Flash popups (the menu in your screenshot, for example) is not drawn in its dedicate window but in the Flash player's one, it cannot float on top of the IFrame window (your content). Thus if the IFrame is not hidden, you'll "see" the pull-down menu going behind your plugin's view.

There is no proper workaround to this limitation.