Another potential issue I found with graphic-walker widget is that elements having position: fixed (popups, tooltips, etc.) are positioned relatively to the browser's viewport, not to the webcomponent's shadow DOM root.
When graphic-walker is used in a small window, not in a fullscreen mode, this may break positioning of such elements (popups, tooltips). It can also collide with existing styles of the host application in case you have any other elements with global positioning.
To reproduce this issue, you may:
- Add graphic walker to a panel of fixed size located let's say in the right-bottom corner of the screen
- Add some datasets
- Go to "Data" tab
- Try changing type of column (let's say from nominal to ordinal), try applying filters, etc. anything that uses tooltips / popups
- Notice the positioning of such tooltips -- they are positioned relatively to the upper-left corner of the browser window, not relatively to the graphic-walker web-component; therefore, such components are mispositioned
A possible solution of this problem was addressed here
You need to add a dummy transform: scale(1) to the root div of the webcomponent and the issue will be gone
Another potential issue I found with graphic-walker widget is that elements having
position: fixed(popups, tooltips, etc.) are positioned relatively to the browser's viewport, not to the webcomponent's shadow DOM root.When graphic-walker is used in a small window, not in a fullscreen mode, this may break positioning of such elements (popups, tooltips). It can also collide with existing styles of the host application in case you have any other elements with global positioning.
To reproduce this issue, you may:
A possible solution of this problem was addressed here
You need to add a dummy
transform: scale(1)to the root div of the webcomponent and the issue will be gone