ICEfaces
  1. ICEfaces
  2. ICE-5520

PanelPopup not auto-centered when using positionOnLoadOnly="true"

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.8.2
    • Fix Version/s: 1.8.2-EE-GA_P01, 1.8.3
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      All

      Description

      When using draggable="true", autoCentre="true" and positionOnLoadOnly="true", the popup is not centered.

        Activity

        Hide
        Isuru Perera added a comment -

        Hi Yip Ng,

        One reason that I didn't want the popup to be auto centered is that the positioning code is not smooth. For example in Firefox, when I scroll I can see the popup jerks when adjusting the position. It works well in Safari and Chrome.

        Therefore as a workaround, I wanted to display the popup in center and stop auto centering after appearance.

        For example see the popups in http://ckeditor.com/demo. I expected that behavior in ICEfaces popups.

        I hope you understand what I'm trying to say.

        Anyway, I am happy with what I have now. ICEfaces is always a great product!

        Thank you for the help!

        Show
        Isuru Perera added a comment - Hi Yip Ng, One reason that I didn't want the popup to be auto centered is that the positioning code is not smooth. For example in Firefox, when I scroll I can see the popup jerks when adjusting the position. It works well in Safari and Chrome. Therefore as a workaround, I wanted to display the popup in center and stop auto centering after appearance. For example see the popups in http://ckeditor.com/demo . I expected that behavior in ICEfaces popups. I hope you understand what I'm trying to say. Anyway, I am happy with what I have now. ICEfaces is always a great product! Thank you for the help!
        Hide
        yip.ng added a comment -

        Hi Isuru,

        Unfortunately, after some consideration, we have decided to keep the current behavior for now.

        The popup jerks are barely discernible to me. Maybe it is browser and machine dependent.

        The CKEditor dialog uses fixed positioning. It's fixed with reference to the top left corner of the window, and it can look very off center when resizing the window to be smaller or larger. Our approach is totally different. It's more dynamic, sophisticated and flexible.

        Maybe you can try using a fixed-positioned div (or <ice:panelGroup>) to look like what's in CKEditor? (In this case you probably have to layout the dialog content yourself, not just put a <ice:panelPopup> in it, because the JavaScript will still try to position the <ice:panelPopup> itself.)

        Show
        yip.ng added a comment - Hi Isuru, Unfortunately, after some consideration, we have decided to keep the current behavior for now. The popup jerks are barely discernible to me. Maybe it is browser and machine dependent. The CKEditor dialog uses fixed positioning. It's fixed with reference to the top left corner of the window, and it can look very off center when resizing the window to be smaller or larger. Our approach is totally different. It's more dynamic, sophisticated and flexible. Maybe you can try using a fixed-positioned div (or <ice:panelGroup>) to look like what's in CKEditor? (In this case you probably have to layout the dialog content yourself, not just put a <ice:panelPopup> in it, because the JavaScript will still try to position the <ice:panelPopup> itself.)
        Hide
        Isuru Perera added a comment -

        Hi Yip Ng,

        I accept the current behavior of the popups and thank you very much for the suggestion.

        I also noticed that CKEditor uses fixed positioning and that's why it's more stable. ICEfaces auto centering is little bit slow on Firefox. It works really well in Chrome and Opera. I think the slowness is because of the calculation of the position on each event.

        Anyway, I decided to use draggable="true", modal="true", positionOnLoadOnly="true" and autoCentre="true" with my popups.

        I got another issue with the fix. When the popup is first displayed, it auto centers when scrolling and resizing. After dragging it stops.

        When I close the popup and open it again, auto centering doesn't work.

        What I noticed is that the dragged property is always true after it has been dragged. This can be reproduced from the component showcase.

        Please try following steps.
        1. Open the popup.
        2. Resize or scroll. It auto centers
        3. Drag the popup.
        4. Close it.
        5. Open again. The popup opens in the center.
        6. Resize or scroll. It does not auto center.

        Please let me know whether you can also reproduce this.

        Thanks.

        Show
        Isuru Perera added a comment - Hi Yip Ng, I accept the current behavior of the popups and thank you very much for the suggestion. I also noticed that CKEditor uses fixed positioning and that's why it's more stable. ICEfaces auto centering is little bit slow on Firefox. It works really well in Chrome and Opera. I think the slowness is because of the calculation of the position on each event. Anyway, I decided to use draggable="true", modal="true", positionOnLoadOnly="true" and autoCentre="true" with my popups. I got another issue with the fix. When the popup is first displayed, it auto centers when scrolling and resizing. After dragging it stops. When I close the popup and open it again, auto centering doesn't work. What I noticed is that the dragged property is always true after it has been dragged. This can be reproduced from the component showcase. Please try following steps. 1. Open the popup. 2. Resize or scroll. It auto centers 3. Drag the popup. 4. Close it. 5. Open again. The popup opens in the center. 6. Resize or scroll. It does not auto center. Please let me know whether you can also reproduce this. Thanks.
        Hide
        Ken Fyten added a comment -

        Hi Isuru,

        This is actually the expected behavior. In this configuration, if the user drags the popup, then it is disables the autocenter setting in order to preserve their positioning of the popup. If you would like to restore the autocentering using the same component instance after it has been hidden and reshown, you could add a value-binding to the autocenter attribute and reset it to true when the popup is shown again.

        Ken

        Show
        Ken Fyten added a comment - Hi Isuru, This is actually the expected behavior. In this configuration, if the user drags the popup, then it is disables the autocenter setting in order to preserve their positioning of the popup. If you would like to restore the autocentering using the same component instance after it has been hidden and reshown, you could add a value-binding to the autocenter attribute and reset it to true when the popup is shown again. Ken
        Hide
        Isuru Perera added a comment -

        Hi Ken,

        Thanks for the reply..

        So, that's again the expected behavior. For me it was unexpected.

        I thought closing popup should reset the earlier dragged state.

        Anyway, thanks for letting me know. I think what I need to reset is the dragged state. I will see.

        I hope I the next release is ready now!

        Thanks.

        Isuru.

        Show
        Isuru Perera added a comment - Hi Ken, Thanks for the reply.. So, that's again the expected behavior. For me it was unexpected. I thought closing popup should reset the earlier dragged state. Anyway, thanks for letting me know. I think what I need to reset is the dragged state. I will see. I hope I the next release is ready now! Thanks. Isuru.

          People

          • Assignee:
            Joanne Bai
            Reporter:
            yip.ng
          • Votes:
            2 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: