How to keep dropdown menu on top of ActiveX

Question

I have a drop-down menu created by JavaScript on all pages and some columns have up to 20 items. This drop-down appears topmost over all content in Mozilla browsers but in Internet Explorer it gets partially covered when an ActiveX object is displayed just below it.

I have tried displaying the ActiveX in a DIV layer and setting z-index but so far I haven't found a solution that works. Adding style to the object tag had no effect...

<object etc style='z-index:3;'>

Applying style to a DIV containing the object also had no effect...

<div align="center" style="z-index:2;">

The dropdown menu has a z-index=1 applied. Adding a 'wmode' parameter to the object also did not work...

<param name='wmode' value='transparent'>

No. It's a custom ActiveX object that displays encrypted PDF. So I can change the object properties if that will help. — WilliamK, Dec 28 '12 at 01:34

score 1 · Answer 1 · answered Jan 07 '13 at 03:56

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.

score 0 · Answer 2 · answered Dec 18 '14 at 20:31

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;
}

.overlay iframe {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>

<body>
    <object ...></object>
    <div class="overlay">
        <div class="overlay-content">This is content you want to appear on top of the windowed object</div>
        <iframe border="0"></iframe>
    </div>
</body>

How to keep dropdown menu on top of ActiveX

2 Answers2

Linked