Fix autoscroll to top in tables in IE

In IE when a window is small (horizontal scrollbar is displayed) click or keyboard input on various parts of UI makes search tables scroll to top. It prevents from selecting items in a table. This issue happens when using absolute positioned element with overflow style. It's a bug in IE.

Two workarounds were added to make UI usable in IE.
Adding position:relative; style to body element fixes the problem in search pages. It doesn't help in association dialogs though.
The bug doesn't occur when some child element has focus. It's possible to set focus to first visible checkbox while scrolling down but user experience is very bad. Better solution seems to scroll back when IE scrolls to top on mousedown. That way mouse click event happens on the target element and it can gain focus and therefore be selected. Some glitches still remains but is usable.

https://fedorahosted.org/freeipa/ticket/2835
This commit is contained in:
Petr Vobornik
2012-07-23 10:32:26 +02:00
parent 65bd82eaa1
commit 1235739122
2 changed files with 13 additions and 0 deletions

View File

@@ -39,6 +39,7 @@ html {
body { body {
overflow: auto; overflow: auto;
position: relative;
background: url(images/outer-background.png); background: url(images/outer-background.png);
background-repeat: repeat-x; background-repeat: repeat-x;
background-position: left top; background-position: left top;

View File

@@ -1371,6 +1371,18 @@ IPA.table_widget = function (spec) {
that.tbody = $('<tbody/>').appendTo(that.table); that.tbody = $('<tbody/>').appendTo(that.table);
// workaround for #2835
if ($.browser.msie) {
that.tbody.mousedown(function(event) {
that.scroll_top = that.tbody.scrollTop();
window.setTimeout(function() {
if (that.tbody.scrollTop() === 0) {
that.tbody.scrollTop(that.scroll_top);
}
}, 0);
});
}
if (that.height) { if (that.height) {
that.tbody.css('height', that.height); that.tbody.css('height', that.height);
} }