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.

Sign up for GitHub

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

Jump to bottom

Modal Positioning #7532

Closed
1 of 2 tasks
rscoates opened this issue Jan 12, 2021 · 4 comments
Closed
1 of 2 tasks

Modal Positioning #7532

rscoates opened this issue Jan 12, 2021 · 4 comments
Labels
status: waiting for author's response 💬 type: question ❓

Comments

@rscoates
Copy link

rscoates commented Jan 12, 2021 •
edited
Loading

What package(s) are you using?

  • carbon-components
  • carbon-components-react

Summary

Hi there,
I'm using the React-Carbon library to design a new part of a frontend for a client, and I'm having problems with the positioning of a modal. As you can see in the image below, clicking on the button in the table opens the modal (and makes the 'darkening' div visible), but the position of the modal isn't relative to where the viewer is currently looking. As a result, it looks as if the modal hasn't opened until you scroll up.

modalgif

I don't know if this is intended behaviour, a bug, or something that I have to override. Grateful for any answers.

Relevant information
@rscoates
Copy link
Author

I managed to solve this using React.createPortal, but I'd love to know if there's a simpler way.

@tw15egan
Copy link
Collaborator

Hey there @rscoates, thanks for reporting! Do you have a link to a reproducible example?

@kubijo
Copy link
Contributor

kubijo commented Mar 17, 2021 •
edited
Loading

@tw15egan

I believe the root of this is in the fact that your modals don't use React portals… several problems then stem from it… the major one being z-index issues because they don't break out of the html context & stay where rendered.

I have solved this on our end by creating a wrapper component that manages the rendering through createPortal into one DOM node in the document body getting something akin to this:

<body>
    …

    <div data-cy="modals-root">
        <div data-modal-mount="workspace_switch-user-dialog">…</div>
        <div data-modal-mount="funds_accounts_overview_create-dialog">…</div>
        <div data-modal-mount="funds_accounts_overview_pause-dialog">…</div>
        <div data-modal-mount="global_exports-dialog">…</div>
    </div>
</body>

Is there a specific reason for not using portals on your end?

@tw15egan
Copy link
Collaborator

I believe we moved away from using React portals because it was introducing some a11y concerns, can't remember the exact issue but there is a relevant discussion with this and dropdown menus (#7565 (comment))

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
status: waiting for author's response 💬 type: question ❓
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@joshblack @rscoates @kubijo @tw15egan