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
--
Petr Vobornik

From 8791f87f6fa5a8747b64ce3c34528f7815086124 Mon Sep 17 00:00:00 2001
From: Petr Vobornik <pvobo...@redhat.com>
Date: Mon, 23 Jul 2012 10:32:26 +0200
Subject: [PATCH] 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
---
 install/ui/ipa.css   |    1 +
 install/ui/widget.js |   12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index 76ce265f0f5c90404046726fe55bd54d73c9b365..4f9d35c1d2a5e458903793423c6fad4de657554e 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -39,6 +39,7 @@ html {
 
 body {
     overflow: auto;
+    position: relative;
     background: url(images/outer-background.png);
     background-repeat: repeat-x;
     background-position: left top;
diff --git a/install/ui/widget.js b/install/ui/widget.js
index 6864d88f5f08a4064b9b5b1cded527d5e99504ff..3002ede556385c16e86952d0c933a334ffdae175 100644
--- a/install/ui/widget.js
+++ b/install/ui/widget.js
@@ -1371,6 +1371,18 @@ IPA.table_widget = function (spec) {
 
         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) {
             that.tbody.css('height', that.height);
         }
-- 
1.7.10.4

_______________________________________________
Freeipa-devel mailing list
Freeipa-devel@redhat.com
https://www.redhat.com/mailman/listinfo/freeipa-devel

Reply via email to