How To Keep Dropdown Menu On Top Of Activex
Solution 1:
Apparently the issue is in-process vs out-of-process plugins. In-process plugins (and activex) will run in the same environment as the web page itself and honour z-ordering. But in-process is rare. Most browsers run plugins and activex in a separate process, so the web page is in one process and the activex/plugin is in a different process. The browser makes it APPEAR like it’s a single process by causing the plugin/activex to DRAW itself in the screen area containing the web page, but you understand its smoke and mirrors and z-ordering is practically ignored. It draws the web page (including menus) and THEN it causes the plugin/activex to draw.
The only way around it (and doesn’t always work) is to wrap the html menu in an iframe.
Solution 2:
I wanted to expand on the issue here. The answer provided by WilliamK is kind of in the right direction but doesn't really explain the real cause of the problem nor does he provide an adequate solution.
The main cause of the problem is the fact that some UI elements are rendered in a windowed context (vs. windowless) which basically means that it's rendered in a separate OS-level process which takes place on top of the browser and not within the browser. This follows what WilliamK was trying to explain, except browsers these days are multithreaded so "out-of-process" doesn't tell the whole story. Here's a great explanation of windowed vs. windowless.
An easy solution to this is not to render something within an iframe, but to have an iframe sitting behind any content you want rendered on top of another windowed object. This is best explained by example. Assume that the <object> is some ActiveX or Flash object rendered in its own windowed context:
<style>.overlay {
position: absolute;
/* adjust for your site - values shown here are arbitrary */width: 600px;
height: 600px;
top: 100px;
left: 100px;
z-index: 1;
overflow: auto;
}
.overlay-content {
position: relative;
z-index: 2;
}
.overlayiframe {
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style><body><object...></object><divclass="overlay"><divclass="overlay-content">This is content you want to appear on top of the windowed object</div><iframeborder="0"></iframe></div></body>
Post a Comment for "How To Keep Dropdown Menu On Top Of Activex"