Tricky!!! Layoutproblem with JS generated select element

Stephan Pilz

Hello, I generate with JS some HTML-Elements (Div, Hidden and Select) inside a Span-Tag. The Span is positioned absolut with JS after pressing a button. Now I see the Select-Element correct filled, but a static HTML-select-element of this page is displayed OVER the dynamic generated select. See Screenshot: www.stephan-pilz.de/1.jpg After I resize the window (manual with mouse !!!) in vertical direction, my dynamic select is displayed OVER the static (this is what I want). See screenshot: www.stephan-pilz.de/2.jpg Did anybody know, why the static select is displayed OVER the dyn. select? Or has anybody some ideas, how I can resize this window and back, to do the manual proc. with JS. For this case, I have try many things with window.resizeTo, .resizeBy, document.body.clientWidth and so on. Nothing of this works. PLEASE NOTE: The code must only work in IE and the window contains an frameset!!! Many thanks. :rose: I'm hopelessly. :confused: Stephan

               \\\\\\|///
             \\\\  - -  //
              (  @ @  )

Guffa

You could try by specifying the z-index of the elements, but I'm not sure how well the select elements would respond to that. IE 6 is using a standard Windows control for the select list, so it doesn't play very well with other elements in the browser. I would suggest that you change the layout so that you won't have select elemenents on top of each other.

--- b { font-weight: normal; }

Stephan Pilz

Hm. Not bad idea with the z-Index. Did you know, how I can change that? It's is unfortunately not possible to change the static elements in the page. Stephan

               \\\\\\|///
             \\\\  - -  //
              (  @ @  )

Stephan Pilz

Now I tried to set the z-order via .style.zIndex to 999 of my dyn. select and to 0 of the static select. That does not solve the problem. Any other ideas ? Thanks Stephan

               \\\\\\|///
             \\\\  - -  //
              (  @ @  )

Paddy Boyd

The select is displayed over because the listboxes generated by the browser do not take z-order styles - i think it's something to do with them actually being windows controls (vague memory...). Anyway, there is a workaround - if you want to put something over a listbox (we had this problem with dynamically created dropdown menus), you can create an iframe the same size as whatever you want to go over your listbox and one z-order underneath it (i've heard the term shim for this). The iframe hides the select box. So if you could look at your page in height it'd be like this:

div to display
iframe
select to hide
PAGE

Stephan Pilz

Hello Paddy, thanks for your answer. Your hint (undoc. feature) solves my problem. BR Stephan

               \\\\\\|///
             \\\\  - -  //
              (  @ @  )