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 |
Lexachoc
changed the title
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
transformproperty 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: