Popup does not fit on screen

[emrecpp]

Hello, As you can see from the picture, if the component to be shown is close to the corner, the popup does not fit on the screen. It would be very nice if a solution that dynamically resizes this. Or we can fit it to the screen by manually entering a margin value manually? (In both cases, the position of the pointer will have to change dynamically, otherwise a bad image may appear)

[sejoalfaro]

I have the same issue, some one has a nice approach to face it??

[emrecpp]

I have the same issue, some one has a nice approach to face it??

I solved this problem by adding my own codes on the library. I created a key called "style" for each step in the Steps list and solved the problem by manually giving values such as marginLeft, marginRight. I realize it's not a very good solution, but it solved my job

[sejoalfaro]

I have the same issue, some one has a nice approach to face it??

I solved this problem by adding my own codes on the library. I created a key called "style" for each step in the Steps list and solved the problem by manually giving values such as marginLeft, marginRight. I realize it's not a very good solution, but it solved my job

Reply:

Oh nice, thank you! I think that I`m going to follow your approach. 👍

How did I try to face it?

case "top":
      // Calculate the initial left position
      let left = targetRect.left + targetRect.width / 2 - popoverRect.width / 2;
      let top = targetRect.top - popoverRect.height - 25; // 25px margin

      // Adjust to stay within viewport horizontally
      if (left < 0) {
        left = 10; // Adjust 10px for padding
      } else if (left + popoverRect.width > window.innerWidth) {
        left = window.innerWidth - popoverRect.width - 10; // Adjust 10px for padding
      }

      // Adjust to stay within viewport vertically
      if (top < 0) {
        top = 10; // Adjust 10px for padding
      } else if (top + popoverRect.height > window.innerHeight) {
        top = window.innerHeight - popoverRect.height - 10; // Adjust 10px for padding
      }

      styles.left = left;
      styles.top = top;
      styles.transform = `translate(-50%, 0)`;
      styles.marginBottom = "25px";
      break;

But this didn't work. The problem that I had using this code was about component's life cycle. Because, when I was trying to get the popover (toolitp card) rect data using a ref , that ref never rerender the component, so it always comes null. Also I turned into this function to a useCallback() function, passing the popover reference as dependecy, but nothing works.

If anyone has another idea please leave it here, I am going to be so grateful! ❤️

[sejoalfaro]

Hello 👋

I'm here again. I left a PR with another approach to solve this problem. I think it's a better way to deal with it than others. So, I would like you to check this solution and leave me your comments. Thank you so much and pure life! 👍

[uixmat]

Hey @sejoalfaro will take a look at the PR today, great work!

[sejoalfaro]

Hey @sejoalfaro will take a look at the PR today, great work!

This is fabulous thank you! 🎉