style-guide icon indicating copy to clipboard operation
style-guide copied to clipboard

Tooltip and element position:fixed not working inside Dialog

Open ziejka opened this issue 2 years ago • 1 comments

Dialog component has a transform CSS property that changes the behavior of its child components in regards to fixed positioning.

An element with position: fixed is positioned relative to the document (the viewport) which acts as its containing block. But, it will NOT always be relative to the document. When any element has transform, filter, or prospective property, it acts as a containing block for all its descendants, including the elements whose position is set to fixed.

Tooltip

image

Element with position:fixed

image ![image](https://user-images.githubusercontent.com/7802772/171007560-941630db-84fb-46d2-82a0-1654f4d80e85.png)

ziejka avatar May 30 '22 14:05 ziejka

Hi @ziejka . Could you share storybook example of your case? You can use styleguide storybook branch build to publish it or live editor. When you push branch, pipeline will deploy storybook. You can find it at https://styleguide-dev.brainly.com/branch/BRANCH_NAME/docs

I prepared example of dialog child with position fixed here and I was able to position dialog child relative to document.

clxandstuff avatar Mar 22 '23 10:03 clxandstuff