ansaurus

Question

html control gets hidden behind aspx controls

Answer 1

A:

Try using z-index, although you have to set position: absolute to the element.

usoban 2009-08-05 09:42:48

can u please explain this a little more..'cos am pretty new to this stuff.. z-index of the html control u mean? and wat do u mean wen u say absolute to the el?

Geethapriya 2009-08-05 11:07:40

If you wrap aspx control wrapped into div, you can just set z-index: 1 and position: absolute to the wrapper div and the same to the dropdown, except you set higher z-index value.

usoban 2009-08-05 18:44:10

Answer 2

A:

You've hit a rather nasty issue with the html drop-down listin IE. In short, it will always sit on top of most other controls, no matter what you set z-index to. There is no css way I know of to fix this easily.

However, the one thing that a drop-down list does not "leak through" is an IFRAME. The trick I usually use is to put an IFRAME underneath your drop-down "menu" and you should find the drop-down list no longer leaks through.

Nasty - but this is a long term IE gripe!

[Edit: to add an example, and also rephrase "put your drop-down 'menu' in an IFRAME"]

The following example illustrates the trick:

<html>
<head></head>
<body>
    <div style="z-index:1">
     <iframe style="position:absolute; height: 200px; width: 100px; z-index: 1"></iframe>
     <div style="position:absolute; background: pink; height: 200px; width: 100px; overflow:hidden; z-index: 2">
      Lorem ipsum dolor sit amet
     </div>
     <br/>
     <select style="z-index: 0;width: 200px">
      <option>option1</option>
      <option>option2</option>
      <option>option3</option>
     </select>
    </div>
</body>
</html>

Note that if you remove the iframe from this example, you see the "leak through" problem re-appear.

Rob Levine 2009-08-05 09:43:13

My code has both aspx controls and html controls inside <div>..so does that mean, separate out the html control and put them inside a separate DIV in IFRAME? and the rest separately.Sorry i dint understand it properly..

Geethapriya 2009-08-05 11:21:52

this is not working for me! in an individual solution it works fine, but wen i integrate it with the application it fails to work :(

Geethapriya 2009-08-06 10:08:21

that may well be because of the stacking order of other items on your page. Remember that your IFRAME must be "in front" of the html drop-down list.

Rob Levine 2009-08-06 11:21:36

so that means the control that has higher z-index than the rest comes on top of the other controls?

Geethapriya 2009-08-06 11:30:08

regarding z-index. Yes - kind-of. A higher z-index means the item is above another item, provided they are in the same stacking context. Check this out for more information: http://css-discuss.incutio.com/?page=OverlappingAndZIndex

Rob Levine 2009-08-06 13:12:47

Thanks a lott Rob...i owe you one! :)

Geethapriya 2009-08-10 05:35:03

no problem at all - glad to help. Of course, you could always mark my answer as accepted! :)

Rob Levine 2009-08-10 08:51:59

hi Rob, am getting the same z-index issue with a tooltip assigned to a label..it gets hidden behind the adjacent control and it is happening only in IE6..and adjusting the z-index is not helping.. Any other suggestions here?Thanks in advance:)

Geethapriya 2009-09-04 09:29:51

ansaurus

tags:

views:

answers:

html control gets hidden behind aspx controls

related questions