[TOBAGO-1388] Wandering popup

• Type: Bug
• Status: Closed
• Priority: Major
• Resolution: Fixed
• Affects Version/s: 2.0.0-beta-1
• Fix Version/s: 2.0.0-beta-3
• Environment: Custom Theme
• Assignee: Udo Schnurpfeil
• Reporter: Bernhard Stadler
• Created: 23/Apr/14 15:24
• Updated: 09/May/14 16:01
• Resolved: 25/Apr/14 08:06

Description

I have a tc:page containing a tc:popup with a tc:sheet inside. For the sheet, paging is enabled. I'll attach an example.
Every time the page is changed, the popup changes its position for some amount.

We have a custom theme and I was able to isolate the following definitions in our tobago.css file which lay open the problem:

.tobago-page {
    border: 1px solid #EEEEEE;
    width: 90%;
    height: 99%;
    // ...
}

Each of these lines alone causes some amount of popup movement. Removing all of them makes the problem disappear.

I also was able to isolate the JavaScript code where the actual repositioning happens: tobago-theme/tobago-theme-standard/src/main/resources/org/apache/myfaces/tobago/renderkit/html/standard/standard/script/tobago-utils.js Tobago.Utils.keepElementInVisibleArea line 98f (SVN trunk):

/**
 * fix position, when the element it is outside of the current page
 * @param elements is an jQuery Array of elements to be fixed.
 */
Tobago.Utils.keepElementInVisibleArea = function(elements) {
  elements.each(function() {
    var element = jQuery(this);
    var page = jQuery(".tobago-page-content:first");
    var left = element.offset().left;
    var top = element.offset().top;
    // fix menu position, when it is outside of the current page
    left = Math.max(0, Math.min(left, page.outerWidth() - element.outerWidth()));
    top = Math.max(0, Math.min(top, page.outerHeight() - element.outerHeight()));
    element.css('left', left);
    element.css('top', top);
  });
};

The "left" and "top" variables are not changed by the max/min assignment, but because of (both!) the border and the changed width of the tobago-page class, element.offset().left and element.offset().top seem to return a different value than actually needed. Even the following code causes the same behavior:

Tobago.Utils.keepElementInVisibleArea = function(elements) {
  elements.each(function() {
    var element = jQuery(this);
    element.css('left', element.offset().left);
    element.css('top', element.offset().top);
  });
};