Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip and element position:fixed not working inside Dialog #2420

Open
ziejka opened this issue May 30, 2022 · 1 comment
Open

Tooltip and element position:fixed not working inside Dialog #2420

ziejka opened this issue May 30, 2022 · 1 comment

Comments

@ziejka
Copy link

ziejka commented May 30, 2022

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)
@clxandstuff
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

When branches are created from issues, their pull requests are automatically linked.

3 participants