Skip to content

Elements with position: fixed escape shadow DOM of the element #501

@it1shka

Description

@it1shka

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:

  1. Add graphic walker to a panel of fixed size located let's say in the right-bottom corner of the screen
  2. Add some datasets
  3. Go to "Data" tab
  4. Try changing type of column (let's say from nominal to ordinal), try applying filters, etc. anything that uses tooltips / popups
  5. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions