fix: filters panel broken due to tabs scroll#30180
Conversation
|
@michael-s-molina I also confirmed that this bug exists in 4.0 as well. |
| // https://github.com/apache/superset/issues/30058 | ||
| .echarts-tooltip[style*='visibility: hidden'] { | ||
| display: none !important; | ||
| } |
There was a problem hiding this comment.
Couple of options if you want to optimize further:
- we can probably narrow this from Superset global to being part of the ECharts plugin(s), perhaps using Emotion Globals.
- This might be a good excuse to open a PR on ECharts and fix it at the root ;)
Either way, I don't see this as a blocker for now. Things are lookin' good!
There was a problem hiding this comment.
Approach 2 is, of course, the fundamental solution, but I decided to leave it as a long-term solution considering the time gap involved in merging the patch and testing Superset compatibility with the corresponding version. (I plan to propose a related PR to echart later.)
Initially, I considered Approach 1, but I had concerns that adding a dependency on @emotion/react to the plugins' npm package might open the possibility for other custom plugins to apply custom global CSS. Therefore, I opted for this approach.
rusackas
left a comment
There was a problem hiding this comment.
LGTM... we can probably get fancy with how/where we do this, but this works well for today!
(cherry picked from commit be0a0ce)
SUMMARY
Fixes #30058
The EChart tooltip is hidden using
visibility: hiddenwithopacity: 0after it disappears, which causes tooltips generated from the previous tab to be recognized as scroll items when configuring the layout for the next tab, resulting in unnecessary scrollbars.This commit addresses the issue by using a CSS hack to change the visibility hidden tooltip to
display: none, effectively removing it and resolving the scrollbar problem.BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Before:
before--css-hide-hack.mov
After:
after--css-hide-hack.mov
TESTING INSTRUCTIONS
ADDITIONAL INFORMATION