I have two ASPxDockPanels in the same ASPxDockZone (vertical). The first panel has an ASPxCombobox with a dropdownlist that should go over the second panel.
However the dropdownlist is just rendered behind the second panel.
First panel has a z-index of 12000 while the second has a z-index of 12002 which explain the issue, so I tried to apply a CssClass property at each panels as suggested on devexpress website but it still didn't work.
Thanks in advance for your help, TheRainFall.
Had my answer from DevXpress support.
It is related to IE z-index bug (IE7). Since I'm using IIS 6, the basic compatibility mode seems to be set on IE7 although users are using IE8.
Related
I use RepeatLayout="Table" property of checkboxlist but still it is rendered with span rather than table on IE11. It works perfectly till ie10 and on other browsers.
I am working on this issue from a long time as still not able to find any solutions. Any help is really appreciated.
Found resolution at below link
http://blogs.telerik.com/aspnet-ajax/posts/13-12-19/how-to-get-your-asp.net-application-working-in-ie11
I am trying to reset the z-index property of an element. It works everywhere except (surprise!) IE7 or IE8-as-IE7. Can anyone point me to the right direction?
Test Case on jsfiddle.net
Frankly I do not hope to have it working in IE7, maybe anyone has ideas for a workaround?
Some context:
The element in question has an input child and is itself located within a jQuery UI Dialog. The Dialog library disables modifications of any fields with lower-than-overlay zIndexes. This feature combined with the above bug means that I can not edit the field even if I properly reset the zIndex for the test element.
Thank you for any ideas you can give!
So IE7 has a strange bug where you have to set the z-index of the parent element too. Check out here
You could also try adding zoom: 1; that sometimes works.
I have a label with a tooltip attribute for rollover effect. This works all great. However, it seems to get hidden behind any dropdown lists that are nearby. I have tried adjusting the z-index, without any luck. This issue does not appear in firefox, and I have not tested it in later versions of IE.
I realize this is probably due to IE6s poor css standards-compatibility, but how can I get around this?
Not the best because it requires javascript/jQuery library, but there's a workaround:
http://dhtmlgrounds.wordpress.com/2008/12/23/ie6-select-box-z-index-bug/
IE6 has a know error that selects always end up the highest in the z order...
Custom select control optional?
Have a look at this
Another idea is to use the ajaxtoolkit autocomplete?
The select dropdown in IE6 is implemented as a Windows control, so the browser isn't really drawing it. Thus, it doesn't support features like z-index. One possible solution is to hide all select boxes on the page when you show your tool-tip. Another option is a custom dropdown, which you can find in libraries like Ext.
As astander and MikeWyatt said, selects in IE are topmost. There are two paths to work-around this problem:
Use a custom select box, rendered with divs, etc. This is rather cumbersome, since you won't be able to replicate all of the drop-down functionality.
Place an <IFRAME> under the tooltip (tooltip z-index > iframe z-index). This will work-around the problem, yet you have to worry about the positioning of the iframe overlay.
I using Ajax ModalPopupExtender but problem with this is menu in appication is display over the ModalPopupExtender. I also set z-index=1 for ModalPopupExtender and z-index=100 for but problem not solved.
After a few minutes of learning how to use Developer Tools (F12 on Chrome/IE), I finally got to the root of the problem.
I'm going to assume one of two things to be true here:
1. Your Main Menu is either on a Master Page, and the ModalPopupExtender control is inside a Child page.
2. The ModalPopupExtender control is placed within the same div that holds the rest of the page's content (except for the Main Menu) and this div has a z-index lower than the div that contains the Main Menu. (Even if you haven't specified these z-index values explicitly, these divs will inherit values automatically.)
If your situation falls into the first category, then here's what's going on: The generated markup places the lightbox inside one div, along with the rest of the child page's content (say wrapperContent), and the Main Menu inside another (say wrapperHeader). The z-index for wrapperHeader MUST be more than the z-index of wrapperContent, or else the submenus will fall beneath the content when they drop down. Now no matter what value of z-index you specify for the lightbox, it will always be displayed under every element inside wrapperHeader, since it inherits its z-index from wrapperContent, which is lower than that of wrapperHeader.
A similar explanation follows in case your situation falls into the second category.
#Jack Marchetti this also explains why this is fixed when you place the lightbox in a div of its own, seperated from the content of the rest of the page.
I hope this helps.
Use Firebug(Firefox Extension) or something similar to inspect the Z-Index of your menu. Then set the ModalPopupExtender's Z-Index 1 higher.
Without seeing a live page, I can't guess the z-index, but it must be greater than 100. You can try setting it to 10001 or something wildly high.
I have done Asp.Net development for around 4 years, my experience tells me to stay away from Microsoft's AJAX libraries especially AJAX Control Toolkit. There are bugs in there that they don't seem intent on fixing.
My advice to you: Use another library. I am using JQuery now, the plugins you find for JQuery on the net are of widely varying quality but some of them are really good and others I have bugfixed myself (I only choose the ones where I can quickly understand the code).
JQuery UI has a very high quality, it includes a dialog widget I am using instead of the ModalPopupExtender. If you dont like the window style, check out one of the 15 plugins presented on this page: 15+ jQuery Popup Modal Dialog Plugins and Tutorials.
Set the z-index to something reallly large like #Jab mentioned.
I also found that if you place the ModalPopupExtender at the bottom of your HTML Markup, it sometimes fixes it for some very strange reason. Give it a try.
I have an ASP.NET application that renders a 3rd party (Telerik's) menu control under
another control (RadDock) when the menu expands.
This artifact ONLY happens in IE7. Not in Safari/FF/Opera/Chrome (Have I left any out?)
The menu control needs to be rendered OVER the other control.
I have Google'd this a fair amount, but have yet to find a simple solution to fix it for IE7.
What is the easiest to solve this problem for IE?
Also do you know if this z-index problem has been resolved in the (pending?) IE8?
This Q is not meant to start a browser flame war. Please only respond if you have a
relevant comment.
Thank you kindly.
I don't know if this is similar or not, but I had an issue with z-indexing where when the z-index was applied to the elements of a container, but not to the container itself, the z-index wasn't being properly applied to the child elements. This manifested itself as background borders appearing over the top of the menu items that should have been on top. I solved the issue by applying the same z-index to the container holding the menu items. I don't know how the Telerik controls set up their CSS, but you may want to check that the class being assigned to the container has an appropriate z-index as well as the menu items themselves.
I've had some problems like that before, although not with the 3rd party controls you mentioned. Check to see if either of the controls sets it's own z-index conditionally if the browser is IE. If that's not the case, try setting a specific z-index for each of the controls (or their containers) to make sure IE doesn't fall back to some sort of default unknown z-index.
If the z-index changes do not fix it, it may actually be a positioning problem rather than a z-index problem. Positioning problems are quite common (from my own experience) when you try to do cross-browser compatibility.