I'm currently running PHPR 5.3 (Build 7474) and noticed that the add/edit/view pop-up windows are "disfigured" when using them in IE (Internet Explorer) browser. The main issue is a strange transparent section in the top portion of the form, as well as the inability to scroll down far enough on the form to select the control buttons such as "save", "reset", etc.
This problem manifest itself primarily when my PC's screen resolution was set to 1280 x 720 or below. Although, I realize these resolution settings are becoming more and more obsolete given the plethora of widescreen monitors out there, it's nonetheless a significant problem I ran into given that my app has over 47,000 users (some still trudging along with IE6 and older monitors with low res display settings).
After trying several different things, and finding very little online, I was able to solve my issue in a very "hacky" way using JQuery (thank the heavens for JQ!). Here's what I did.
In the edit page (the form that is set to popup), I added this to the JS OnLoad event:
//Create a function to change style attribute of these YUI items by identifying them via their class (since we don't have id's for them)
//Remember, these popups are generated on the fly, thus you can't assign id's ahead of time and by default they don't have one anyhow.
function AdjustCssForIE(){
var h = $(window).height();
var new_h = h/1.25;
$(".bd").attr('style', 'height:'+new_h+';');
$(".yui-panel").attr('style', 'visibility: inherit; width: 606px; height:'+new_h+';');
}
//Now call the function right away to make those changes to those items that have those classes.
AdjustCssForIE();
// Get all the controls and bind a 'focus' event to handle the IE issue
var recCtrlsArr = Runner.controls.ControlManager.getAt('parents_tbl');
// loop through all controls on the page making them all call the function once they have the focus
for(var i=0;i<recCtrlsArr.length;i++)
{
var ctrl = recCtrlsArr[i];
ctrl.on('focus',function(e){
AdjustCssForIE();
}
);
}
Now, if you also have collapsible sections in your edit form, you must also bind them with an event to call the function we created. This is necessary, because if you click anywhere on that section (besides the fields that are contained in them) IE will disfigure the form once again. Binding a click event to the section ensures that when clicked it will also apply the function to ensure the style attributes remain constant per our function's specs.
Here's an example of a two sections that were present in my form:
//target collapsible sections for IE issue
$('#section_Home_Address1').click(function() {
AdjustCssForIE();
});
$('#section_Parent_1_Info1').click(function() {
AdjustCssForIE();
});
//Etc... do this for each section
For those who may be wondering, I was using IE8 (have not tested on 7 or 9, though they should work the same in theory given we are only manipulating the dom style with standard JQuery),
The trick here was to essentially eliminate the unexplained transparency that took place when popups opened in low resolution screen settings as well as the ability to scroll the the forms control buttons to be able to save, reset, etc. By changing the size of the popup window by 25% of the original YUI request (see our function dividing the window height by 1.25) we are able to present the controls where the user can actually click/select them.
I hope this saves someone the many hours of frustration I spent trying to make my popup forms compatible with the absurdly non-standards compliant IE browsers!
Cheers,