IE7 rendering issues with more than one user controls on a page with Ajax ModalPopupExtender

IE7 is really great with its issues on CSS styles. Most websites which work fine on IE6 will show issues on IE7. I will do another posting on IE7 rendering and its different solutions (Sorry it is only work around and not solutions).

This is specifically for the issues of Modal Popup with AJAX call on IE7. Normally when we develop websites using Visual Studio (2005 or 2008) we have the flexibility to add up AJAX tool kit, which is really good and has a lot of extender controls. Great to work with. But when we try the ajax tool kit controls we may need to relate the styles in 2 different ways.

1. Using the Skins (Which gives a great deal of customization in server)
2. CSS (as it is ajax enabled, and so without going to server and loading the Skins, it will try to load the CSS from client side scripting)

Scenario:

Now here comes the problem. Let us say that we have a page where we have more than one user control (custom user control) one below the other. Each user control has one or more columns where user can input something and search and maybe having a grid to display the results. Also that each search control (maybe a text box) has an ajax enabled ModalPopupExtender connected which may give the result of data (maybe in a grid) when we type something in the search textbox. In this case, normally what you do is, you will have a ModalPopupExtender hidden on page load and then show it when user clicks on search textbox (by the client side javascript using OnChange of textbox)

Issues:

Notice that in IE7 starts working in a peculiar way. You can see that after page load, you cannot click on the textbox on the bottom user control. But you can if you search on something on top user control. This is funny.

Solution:

IE7 has removed the support of a famous CSS which is "visibility:hidden". Well, what we normally do is, the CSS for the ModalPopup will have the style which has the attribute "Visibility:hidden" which is quite natural and when ever needed we will have the javascript telling "display:inline". As this attribute is not continued in IE7, i will break the rendering of IE7 and will block the area where this ModalPopup is placed. Funny thing is that, it works fine (the Modal is hidden and no issues). But IE7 rendering engine gets confused on seeing this, and will hide it (Anyway) and then blocks the area below the ModalPopupExtender (to the height and width we have specified for the ModalPopup. But as when we type something on the search box and press search, the modal window is shown and the rendering will rearrange the Search result just below the textbox and the issue is gone. That is a big bug and the solution is as mentioned.

Tech Team @ Seguro Technologies