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
Comments
I have came up a temporary fix for this issue : 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: 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 |
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
Desktop (please complete the following information):
The text was updated successfully, but these errors were encountered: