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.
Related
We are instituting a new responsive web template design on our website, this design has worked perfectly in all but one place (We are on the Convio CMS if that helps). Here is what it is supposed to look like (menu and contact info in right column):
http://www.ucc.org/feed-your-spirit/practices/prayer-flags.html
On this page however:
http://www.ucc.org/find/find-a-ucc-church.html
that info appears below here. However after you use the find feature, the information then DOES appear on the right side as it should. This really has me stumped.
The find a church service is a component that can be placed on any page.
Secondary issue - the map is not visible on the results page in Firefox, though on the current page - www.ucc.org/find - it is visible.
Any solutions, ideas, etc. are welcome!
Two problems, both CSS. The left div, ef-inner3 does not have float:left nor width specified. This causes it to be too wide, pushing the topics area down.
You need to add those CSS values in. How you do that with your particular CMS system I am not sure.
The reason behind it moving down is thus: When you float two elements, their combined widths cannot be greater than the width of their parent. If they are greater then there is not enough room and the second floated item moves below the first.
Tricky one! But I'm thinking this might not be CSS.
My first reaction was that maybe a DIV isn't properly closed somewhere.
Based on the Find function fixing it, maybe you have a </div> that's set to display with the Find results, so it's not showing up before the Find function brings it up?
Hope that makes sense! If possible, try searching for any closing tags that are inside any kind of if/else statement.
EDIT - just noticed - A lot of the content in your Find a Church page seems to be after the 'three fourth' DIV, and after a 'clear' DIV. If you can edit the source, try placing all of that back inside the 'three fourth' DIV and see what happens.
I have a Drupal website loaded with AJAX. Every time I edit my title, AJAX is checking whether or not I've actually changed it. But every time the AJAX starts checking, my whole lay-out is jumping around...
BEFORE
AFTER
I tried to edit the .ajax-threbber-css class with position absolute, relative and fixed, but no result. Every time the throbber reacts differently. A z-index of 99999999999 doesn't work either... Is there a way to float this ajax-throbber-div to the absolute top without influencing any other items?
You would first need to check its current CSS properties, it could be that you are having them overwritten by something else.
Firebug or Google Chrome developer tools would help. Setting the position to absolute, should do it for you, its just CSS gets murky if you don't consider other pieces of the puzzle acting upon your object that you are trying to style.
Issue is Menu is not overlaping or float, above the IFrame i am design the menu with table and Div tag in Usercontrol From and i called Usercontrol from in the Index.aspx.
If any got the idea or experience to solve this issue please help me Thanks for Time and help
Hari
Most likely, you are running into an issue with z-index. For your menu, set the z-index for it and all of it's child controls to a high number, and then set the z-index on the iframe to a low number. If this doesn't solve your problem, you are going to need to continue setting the z-index in the parent elements of both your menu and your iframe because in some (all?) browsers, z-index does a sort of propagation, where if a parent has a lower z-index than one of its siblings, then the sibling will get priority and end up on top.
You also need to make sure that your elements have the css position property set to something other than the default, because z-index only works with positioned elements.
There are also known issues with older browsers with regards to iframes, so if you are using an older browser, try something more modern.
iframes are a tricky beast, so you are really going to have to experiment with various things to figure out your exact issue. I could provide more information, but I would need to see an example of your HTML/CSS where it isn't working.
I have a bookmarklet that will come up with a iframe that will load a web form I have. On most site, it works fine with the bookmarklet on top of every element in the current html page. But for certain sites with a lot of javascript loading (e.g. meebo.com), the loaded iframe will go below. How can i troubleshot this? Thanks. attached screen shot.
If you are using a positionable element such as a div, you should ensure the z-index style is set to a value higher then any other element.
Of course the page you load in the iFrame may also be doing exactly this. Therefore you may need to use a timer (setTimeout) to delay for say 500ms and then get the current highest z-index and add 1 to it.
Also, because you don't know in advance anything about the page shown in the iFrame, you would actually need to manually search for all elements containing a z-Index style. Once you have a collection of these elements, then get the highest z-Index value.
I'd definitely look at using jQuery to make this much easier.
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.