Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popover and Tooltip cause overflow (white space in page) when window resize #854

Open
Lexachoc opened this issue Apr 9, 2024 · 1 comment · May be fixed by #857
Open

Popover and Tooltip cause overflow (white space in page) when window resize #854

Lexachoc opened this issue Apr 9, 2024 · 1 comment · May be fixed by #857

Comments

@Lexachoc
Copy link
Contributor

Lexachoc commented Apr 9, 2024

Describe the bug

Extra white space in the right side of page due to popover after window resize

To Reproduce
Steps to reproduce the behavior:
Create a popover close to the right side of the page, and then resize the window (make it smaller in width)

You will see white space in the right side of page due to the transform property of the popover.

Expected behavior
I think if the popover is hidden, the "transform" property should be removed in order to resolve the issue.

The tooltip component is also affected when positioned near border sides.

Screenshots
image

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Chrome
  • Version: 123.0.6312.106 (Official Build) (64-bit)
@Lexachoc
Copy link
Contributor Author

Lexachoc commented Apr 9, 2024

I have came up a temporary fix for this issue :
For Popover: https://github.com/Lexachoc/flowbite/blob/374890fcf3bdc1bba29d12e966f3dea262ee5d58/src/components/popover/index.ts#L123C1-L127C21

        this._hideHandler = () => {
            setTimeout(() => {
                if (!this._targetEl.matches(':hover')) {
                    this.hide();
                }
            }, 100);
+            setTimeout(() => {
+                if (!this._targetEl.matches(':hover')) {
+                    this._targetEl.style.transform ='';
+                }
+            }, 100);
        };

For Tooltip:

        this._hideHandler = () => {
            this.hide();
+            setTimeout(() => {
+                this._targetEl.style.transform ='';
+            }, 100);
        };

For the case when Clipboard is used with tooltip, the above snippet for tooltip must be changed again so that the final solution is as follows:
(The problem is that the success tooltip message is shown and the default tooltip message is hidden when we click the trigger, but we don't want the tooltip to lose its transformation position until we move the mouse out of the trigger).
https://github.com/Lexachoc/flowbite/blob/25d7ea34a776202922b148f528e1151ea9d73a56/src/components/tooltip/index.ts#L115C1-L119C21

        this._hideHandler = () => {
            this.hide();
+            setTimeout(() => {
+                if (!this._targetEl.matches('.opacity-100.visible')) {
+                    this._targetEl.style.transform ='';
+                }
+            }, 100);
        };

All the above codes clear the value of the "transform" property after 100 ms after hiding the popover/tooltip

@Lexachoc Lexachoc changed the title Popover cause white space in page when window resize Popover and Tooltip cause overflow (white space in page) when window resize Apr 13, 2024
@Lexachoc Lexachoc linked a pull request Apr 14, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant