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

<OverflowMenu floatingMenu> rendered position is off in v9 #2907

Closed
1 of 2 tasks
s100 opened this issue Jun 3, 2019 · 3 comments
Closed
1 of 2 tasks

<OverflowMenu floatingMenu> rendered position is off in v9 #2907

s100 opened this issue Jun 3, 2019 · 3 comments
Labels
component: overflow-menu severity: 3 https://ibm.biz/carbon-severity type: bug 🐛 version: 9 Issues pertaining to legacy Carbon

Comments

@s100
Copy link
Contributor

s100 commented Jun 3, 2019 •
edited
Loading

What package(s) are you using?

  • carbon-components
  • carbon-components-react

Detailed description

Describe in detail the issue you're having.

When using <OverflowMenu floatingMenu>, Carbon looks for an ancestor element with attribute data-floating-menu-container and renders the menu contents inside that element. If that element is relatively positioned, the positioning of the menu contents is wrong.

Here's a minimal reproduction:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/carbon-components.css"></link>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/[email protected]/prop-types.js"></script>
    <script crossorigin src="https://unpkg.com/[email protected]/dist/carbon-icons.js"></script>
    <script crossorigin src="https://unpkg.com/[email protected]/index.js"></script>
    <script crossorigin src="https://unpkg.com/[email protected]/umd/carbon-components-react.js"></script>
    <script crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const { OverflowMenu, OverflowMenuItem } = CarbonComponentsReact

      window.addEventListener('load', () => {
        ReactDOM.render(<div
          data-floating-menu-container
          style={{
            width: '500px',
            height: '500px',
            backgroundColor: 'yellow',
            position: 'relative',
            left: '100px',
            top: '100px'
          }}
        >
          <OverflowMenu className='overflow-menu' floatingMenu>
            <OverflowMenuItem itemText='Menu item 1' />
            <OverflowMenuItem itemText='Menu item 2' />
          </OverflowMenu>
        </div>, document.querySelector('.root'))
      })
    </script>
  </head>
  <body>
    <div class="root"></div>
  </body>
</html>

And here's a screenshot of what I see:

image

Note how the vector from the top left corner of the screen to the bottom midpoint of the menu icon is the same as the vector from the bottom midpoint of the menu icon to the tip of the arrow in the menu body. This indicates that the menu body is being positioned relative to its nearest positioned ancestor (the yellow <div>) but the calculations for its position assume that it is being positioned relative to <body>.

Is this issue related to a specific component?

<OverflowMenu>

What did you expect to happen? What happened instead? What would you like to
see changed?

I expected the menu contents' position to be beneath the menu icon, with the tip of the arrow pointing at the bottom midpoint of the menu icon.

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

V9 (so that's carbon-components-react@6

Related: #2876.
@s100 s100 mentioned this issue Jun 3, 2019
Closed
@dakahn dakahn added the version: 9 Issues pertaining to legacy Carbon label Jun 3, 2019
@dakahn dakahn added priority: low severity: 3 https://ibm.biz/carbon-severity labels Jun 3, 2019
@asudoh
Copy link
Contributor

asudoh commented Jun 5, 2019

After mulling over this topic, I think recommending getMenuOffset() workaround is best for now. Automatically adjusting menu position by target container's position may kill application's adjustment for the same thing.

This was referenced Feb 13, 2020
Closed
Merged
@linzhaoken
Copy link

linzhaoken commented Jun 10, 2020 •
edited
Loading

My team experience the same, to fix it, 2 things you have to do. The root cause of this is the menu's parent div has to be relative position.

  1. wrap your menu with <div style={{position: 'relative'}} data-floating-menu-container>
  2. use onOpen prop to reset menu top and left position. for my I set top: 20px, left: 0

@lonestor lonestor mentioned this issue Sep 2, 2020
Closed
@rccc
Copy link

rccc commented Sep 12, 2022 •
edited
Loading

Hello,

The same bug occurs for web-component framework v 1.21.0 when i put overflow-menu inside an accordion panel.

Eric

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: overflow-menu severity: 3 https://ibm.biz/carbon-severity type: bug 🐛 version: 9 Issues pertaining to legacy Carbon
Projects
Design System
Archived in project
Milestone
No milestone
Development

No branches or pull requests
8 participants
@rccc @asudoh @mattrosno @joshblack @linzhaoken @s100 @abbeyhrt @dakahn