[jira] [Commented] (TOBAGO-1388) Wandering popup

["Udo Schnurpfeil (JIRA)" <de...@myfaces.apache.org>]

    [ https://issues.apache.org/jira/browse/TOBAGO-1388?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13979759#comment-13979759 ] 

Udo Schnurpfeil commented on TOBAGO-1388:
-----------------------------------------

It seems to use position() instead of offset() resolves the problem. I've commited the change to the trunk.

> 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
>            Assignee: Udo Schnurpfeil
>         Attachments: PopupTestModel.java, popuptabletest.xhtml
>
>   Original Estimate: 2h
>  Remaining Estimate: 2h
>
> 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)