Wj-popup: how to center popup

Wj-popup: how to center popup

Posted by: amiller on 14 September 2017, 2:52 am EST

• 

  amiller

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 2:52 am EST

  Hi,

  Wijmo: 5.20163.234
  
  Angular: 2.1.2

  I need a popup to display in the center of the screen, however when the active element is from a fixed float window it centers from the floating window instead of the main document.

  I cannot code around this issue at all.

  Your code:

  
       // 3 - no reference element, adjust the parent based on the current active element
       // (e.g.grid in dialog, jQuery panel)
       for (var e = getActiveElement(); e; e = e.parentElement) {
             if (!hasClass(e, 'wj-popup') && // not our own popups: TFS 206009
                  getComputedStyle(e).position == 'fixed') {
                  parent = e;
                  break;
              }
       }
  

  Thanks in advance,
  
  Anthony

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:52 am EST

  Hi Anthony,
  
  You can show wjPopup in the center using wjPopup show() method. This method does not depend on any element and allows to display the popup in the center of the screen.
  
  For reference, please see the attached sample that implements the same.
  
  If the issue persists, please modify depicting your issue so that we can assist you accordingly.
  
  Please run npm install command before running the sample.

  Thanks ,
  
  Manish Kumar Gupta
  
  2017/01/wjPopup.zip

• 

  amiller

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:52 am EST

  Hi,

  Thanks for your time to provide feedback on my issue.

  I have discovered that the issue is due to the width of the dialog using bootstrap class col-sm-8 to provide the width size rather the fixed size you used. However for some reason when the side panel is not affixed everything works fine.

  I’ve updated the example you sent through with a side affix panel.

  Working scenario: With the scrollbar at the top click the button in the blue side panel. The dialog shows correctly.

  Incorrect scenario: Scroll the window down till the blue side panel pops out then click on the button. The dialog will now center over the side panel.

  I’ve basically tracked this down to within the showPopup() function, the call to

  Control.refreshAll(popup);

  does not calculate the correct dialog offset width.

  Cheers,
  
  Anthony.

  2017/01/wjPopup-1.zip

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:52 am EST

  Hi Anthony,
  
  Thanks for the sample. We were able to replicate the issue at our end and looks like a bug so we have escalated this issue to the concerned team with tracking id 233462. We will notify you as we get update on this issue.

  In the meantime, set left position of wjPopup on shown event, this will set the position of popup in the center.
  
  For reference, please see the attached sample that implements the same.

  Thanks,
  
  Manish Kumar Gupta
  
  2017/01/wjPopup_modified.zip

• 

  amiller

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:52 am EST

  Thanks for this workaround

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 26 February 2018, 9:11 pm EST

  Hi,
  
  This issue seems OK with build 5.20173.409+

  ~Manish

• 

  seaninglis

  • Post Options:
  • Link
    Copy

  Posted 17 January 2022, 9:48 am EST

  An old thread but I seem to be having exactly this issue again in 5.20213.824

  I’ve added an event handler to

  shown

  as in the sample code, but this also seems unreliable; in my case (below) have to wrap it in a timeout of around 300ms, any lower and it only seems to work intermittently.

  setTimeout(() => {
  
    s.hostElement.style.left = (window.innerWidth / 2 - s.hostElement.offsetWidth / 2) + 'px';
    s.hostElement.style.top = (window.innerHeight / 2 - s.hostElement.offsetHeight / 2) + 'px';
  },300);
  

  The behavior I see is that when I have content of variable size, the top-left position of the popup seems to be persisted from one invocation to the next.

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 19 January 2022, 2:17 am EST

  Hi,
  
  We are sorry but we are unable to replicate the issue at my end. It works fine with the 100ms as set timeout.
  
  This issue is because of the dynamic content and the dynamic height. So we need to handle the shown event and update the Popup position.

  For this, please refer to the following demo sample for reference:
  
  https://jscodemine.grapecity.com/share/oU6-LIybGE28tD-5gJRMAQ/

  Regards,
  
  Manish Gupta