I'm currently experiencing some issues with IE7, specifically with my dialog not functioning correctly. Although the dialog itself works fine, the button on it does not display properly until I hover over its intended placement.
Below is the jQuery code snippet:
$('#sessionTimeout-dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
closeOnEscape: false,
open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); },
buttons: [{
// Button one - closes dialog and makes call to keep-alive URL
text: o.stayConnected,
"class": "confirmSession",
click: function () {
$(this).dialog('close');
$('#sessionTimeout-dialog div div button').addClass('confirm');
$.ajax({
type: 'POST',
url: o.keepAliveUrl
});
$('.formOverlay').find('*').attr('disabled', false);
// Stop redirect timer and restart warning timer
controlRedirTimer('stop');
controlDialogTimer('start');
}
}]
});
While this code functions correctly in IE8 and above, Firefox, and Chrome, it seems that IE7 has trouble with the control generated by the dialog.
To summarize the behavior:
IE8+ work as expected
IE7 exhibits the following behavior:
with class = "confirmSession"
- The page loads without errors
- The dialog appears without the button
- Hovering over the button's location causes it to appear with the correct CSS style
without class = "confirmSession"
- The page loads without errors
- The dialog shows up with a button (no CSS applied)
This unexpected behavior has left me puzzled, and I hope we can collaborate to resolve it.
EDIT:
As requested, here is the CSS style for the confirmSession class, extracted from our .less file:
.confirmSession {
width:45%; font-size: 1em; background: #4c8cb4 !IMPORTANT; border: #427594 1px solid; padding: 0px; color: #fff; text-decoration: none; .box-sizing(border-box); white-space: normal; cursor: pointer; float: none; font-weight: 400; margin: 10px 2%; display: block; float: left;
-webkit-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4), 2px 2px 3px -2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4),2px 2px 3px -2px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.4), 2px 2px 3px -2px rgba(0, 0, 0, 0.4);
text-align: center; position: absolute; bottom: 1em; left: 10px; right: 10px;
}