Issue with pop up placement

[rp-omar]

Version

@toast-ui/[email protected]

Test Environment

Chrome Version 123, MacOs Sonoma 14

Current Behavior

The eventDetailPopup is not positioned correctly when the Calendar component is in a parent that has a width/height different than 100%, here is a reproduction
https://codesandbox.io/p/sandbox/toast-ui-react-calendar-bug-report-f4522l

Expected Behavior

The eventDetailPopup is positioned correctly. V1 is working fine.

[jithutj]

I am also facing the same issue when I put the height: 500px to fix "month" view overlap..
But now the event popup is misplaced.

below is the css i added to fix the month view:-

.toastui-calendar-layout.toastui-calendar-month {
                height: 500px !important;
                min-height: 500px;
                max-height: 600px;
            }

[hongrunhui]

I am also happend, the card will render in error position

[hongrunhui]

[mtangoo]

Have anyone figured out the solution for this?

[1engels]

Hello guys, I've been testing with this workaround:

Use this in /src/components/popup/eventDetailPopup.tsx

function calculatePopupPosition(eventRect, layoutRect, popupRect) {
  let top = eventRect.top + eventRect.height / 2 - popupRect.height / 2 - layoutRect.top;
  let left = eventRect.left + eventRect.width - layoutRect.left;

  if((eventRect.top + (eventRect.height/2) + (popupRect.height/2)) >= (layoutRect.top + layoutRect.height)){
    top = layoutRect.height - popupRect.height;
  }

  if( top < 0 ) top = eventRect.height;

  const freeSpaceToTheLeft = eventRect.left - layoutRect.left;
  const freeSpaceToTheRight = layoutRect.width - eventRect.width - freeSpaceToTheLeft;

  if(freeSpaceToTheRight < freeSpaceToTheLeft){
    left = eventRect.left - popupRect.width - layoutRect.left;
  }

  if(freeSpaceToTheRight <= popupRect.width && freeSpaceToTheLeft <= popupRect.width){
    left = layoutRect.width / 2 - popupRect.width / 2;
  }

  return [ top, left];
}

function calculatePopupArrowPosition(eventRect, layoutRect, popupRect) {
  const top = eventRect.top + eventRect.height / 2 - layoutRect.top; 
  const popupLeft = eventRect.left + eventRect.width;
  const isOutOfLayout = popupLeft + popupRect.width > layoutRect.left + layoutRect.width;
  var direction = DetailPopupArrowDirection.left;
  if(layoutRect.right == eventRect.right)
    direction = DetailPopupArrowDirection.right;

  return {
    top,
    direction
  };
}

Use this in /src/components/popup/eventFormPopup.tsx

function calculatePopupPosition(popupArrowPointPosition, layoutRect, popupRect) {
  var top = popupArrowPointPosition.top - popupRect.height - HALF_OF_POPUP_ARROW_HEIGHT - layoutRect.top;
  var left = popupArrowPointPosition.left - popupRect.width / 2 - layoutRect.left;
  var direction = FormPopupArrowDirection.bottom
  if(top < 0){
    top = top + popupRect.height + HALF_OF_POPUP_ARROW_HEIGHT;
    direction = FormPopupArrowDirection.top;
  }
  if(left + popupRect.width > layoutRect.width){
    left = layoutRect.width - popupRect.width;
  }
  if(left < 0)
    left = 0;  
  
  return {
    top: top,
    left: left,
    direction : direction
  }
}

And in the line:
const arrowLeftPosition = popupArrowPointPosition.left - left;
Change it to:
const arrowLeftPosition = popupArrowPointPosition.left - left - layoutRect.left;

Edited on Jan 1st:
After a thorough review and testing it in a live website, I realized that the declarative DIV should use the CSS property position: relative, because popups use position: absolute and they will align relative to the first tag that has that property. In my case, I'm using the following code inside a container in Bulma, and I’m not having any issues: <div id="calendar" style="position: relative; height: 1200px"></div>

[mtangoo]

Is this supposed to fix the vanilla JS version too?

[1engels]

@mtangoo yes, just find the functions and replace the lines that I commented above.

[mtangoo]

Thanks. I'll test early January and post results