Schedule - QuickInfo popup disappearing out of scrollable area

[Justin Schnurer]

I am trying to render a ScheduleComponent inside a flex container. I am able to get the scheduler to fill its container. However, the Quick Info popup opens up off the bottom of the screen when clicking items near the bottom of the scrollable area (the parent flex area has overflow: hidden).

Here is a screenshot of what it looks like:

 

My layout is something like this:

<div className="schedule-wrapper">
  <div className="scheduler">
      <ScheduleComponent />
  </div>
  <div className="schedule-footer"> ...footer data... </div>
</div>

I have then styled the elements like this:

 .scheduler-wrapper {
    flex: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1em;

    .e-schedule {
       flex: 1;
       min-height: 0;
    }
  }

I have also assigned the ScheduleComponent's width property to "100%".

Is there a way to force the QuickInfo popup to render inside a react Portal or something? How can I fix this issue?

One last thing to note: When I have the QuickInfo popup open, if I use my mouse wheel to scroll the scrollable area in the ScheduleComponent, the popup quickly snaps into the viewable area. Here is a screenshot of what it looks like after scrolling 1 tick upward:

[Ruksar Moosa Sait]

Hi Justin,

We have checked on your query and suggest you use refreshPosition method of the popup object to resolve your reported problem.

onPopupOpen(args) {

        if (args.type === "QuickInfo") {

          let popupObj = (args.element).ej2_instances[0];

          popupObj.open = function(args) {

            popupObj.refreshPosition();

          };

        }

      }

Sample: https://stackblitz.com/edit/react-hvdkg2?file=index.js

Kindly try the above solution and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait

[Justin Schnurer]

This works perfectly. Thank you very much!

Here is how I implemented it in my typescript app:

let popupObj = args?.element?.ej2_instances?.[0];

if (popupObj) {

  popupObj.open = function () {

    popupObj.refreshPosition();

  };

}

[Ravikumar Venkatesan]

Hi Justin,

Thanks for the update.

We are happy that our solution works for you.

Regards,

Ravikumar Venkatesan