Bernhard Stadler created TOBAGO-1388:
----------------------------------------

             Summary: Wandering popup
                 Key: TOBAGO-1388
                 URL: https://issues.apache.org/jira/browse/TOBAGO-1388
             Project: MyFaces Tobago
          Issue Type: Bug
    Affects Versions: 2.0.0-beta-1
         Environment: Custom Theme
            Reporter: Bernhard Stadler


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:
{code}
.tobago-page {
    border: 1px solid #EEEEEE;
    width: 90%;
    height: 99%;
    // ...
}
{code}
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):
{code}
/**
 * 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);
  });
};
{code}

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:
{code}
Tobago.Utils.keepElementInVisibleArea = function(elements) {
  elements.each(function() {
    var element = jQuery(this);
    element.css('left', element.offset().left);
    element.css('top', element.offset().top);
  });
};
{code}





--
This message was sent by Atlassian JIRA
(v6.2#6252)

Reply via email to