Overflow menu doesn't scroll with page #911

travis1111 · 2018-06-19T14:31:32Z

Detailed description

I have a page has many cards, there is a overflow menu (three vertical dots) on each card. I can click on the menu (three dots) to bring the drop down menu. However if the page has scroll bar (too many cards to fit into one page), when I scroll down, the drop down menu stays where it was, it won't scroll with the card it attached too.

Is this issue related to a specific component?

Overflow menu

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

Should scroll with the menu icon (three dots)

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

Latest

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Microclimate

Steps to reproduce the issue

see description;

Additional information

Screenshots or code
Notes

Add labels

Please choose the appropriate label(s) from our existing label list to ensure that your issue is properly categorized. This will help us to better understand and address your issue.

travis1111 · 2018-06-19T18:05:28Z

alisonjoseph · 2018-06-20T12:58:46Z

Can you create a codepen to show the issue you are having. I am unable to duplicate. Thanks! https://codepen.io/team/carbon/full/MOEwjp/

travis1111 · 2018-06-22T13:16:37Z

and probably similar issue:

its a screen recording, you need to unzip and play. Github doesn't allow me to attach videos.
bug.mp4.zip

travis1111 · 2018-06-22T13:35:28Z

You won;t be able to reproduce it if you just use stock sample. See my screen shot, I have cards, at least 4 cards, and make the screen just fit for 3 and try it. Please can you take a look of the video I attached above.

tw15egan · 2018-06-22T15:07:57Z

Can you recreate the sample in something like codesandbox or codepen? I see the issue, but without actually being able to look at the code there is not much we can do to help

travis1111 · 2018-06-25T19:49:09Z

Hi, it turns out something to do with overflow-y: auto settings on the div we have.

So we have something like this

header here
<div style="overflow-y:auto;">
...
...
card with overflow menus, many of them

</div>
footer

The result is, we create a sticky header and footer, so that only the div with overflow-y:auto is scrollable. The overflow menu is in that scrollable view. When we click the three dots, the menus (ul wiith li s) are created outside of that div, so i think that is the why the overflow menu doesn't scroll with the content of the div.

So is there a way to let overflow menu to be placed inside the div, e.g. close to the element contains three dots so that it could stay with the 3 dots menu when scrolling?

asudoh · 2018-06-25T22:00:07Z

@travis1111 Currently not - We know there is a need for “custom floating menu target” mechanism, though, e.g. #910 - Will see if we can come up with something simple.

travis1111 · 2018-06-26T11:05:32Z

Thanks @asudoh also did you see the video I pasted above? bug.mp4.zip, I think it is also related, the ul is placed outside of the scrollable area.

Do you have a rough timeline for when this can be fixed?

asudoh · 2018-06-26T12:15:35Z

@travis1111 Not at this moment - Meanwhile, feel free to copy overflow-menu.js and floating-menu.js code over to your project and customize them as your project desires. Thanks!

asudoh · 2018-06-28T07:39:51Z

Oops I totally forgot that the floating menu code looks at an element with data-floating-menu-container attribute first before looking at <body>. Hope it helps some.

This change makes `<FloatingMenu>` support an element to put the menu into, which is, the ancestor of the trigger buttun with `data-floating-menu-container` attribute. This change also removes code for React15-, which we dropped the support from 9.x codebase. Refs carbon-design-system/carbon#910. Refs carbon-design-system/carbon#911.

This change makes `<FloatingMenu>` support an element to put the menu into, which is, the ancestor of the trigger button with `data-floating-menu-container` attribute. This change also removes code for React15-, which we dropped the support from 9.x codebase. Refs carbon-design-system/carbon#910. Refs carbon-design-system/carbon#911.

asudoh · 2018-07-03T00:24:29Z

Wrt the movie in the zip - It appears different from the issue with scrolling this PR is taking about. Feel free to open a separate issue if the problem still exists. Thanks!

travis1111 · 2018-07-04T19:26:47Z

@asudoh thanks. how do I use this attribute? something like this?

<div class="parent">
<div data-overflow-menu data-floating-menu-container=".parent" .....

asudoh · 2018-07-05T06:00:19Z

@travis1111 You are right assuming the 1st <div> contains the 2nd <div>.

travis1111 · 2018-07-05T13:04:30Z

hmm then it is not working...

here is the demo code (I forked from your official codepen):

https://codepen.io/anon/pen/XYwoVM

asudoh · 2018-07-06T00:40:21Z

Oops I had a oversight looking at your HTML - It should be:

<div data-floating-menu-container>
  <div data-overflow-menu ...>
    ...
  </div>
</div>

Refs carbon-design-system#911.

…961) Refs #911.

travis1111 · 2018-07-24T19:45:36Z

@asudoh Hi, i tried this

<div data-floating-menu-container> ... ...

Still not working. here is an example:

https://codepen.io/anon/pen/QBgbVJ/

asudoh · 2018-07-24T22:47:36Z

Floating menu uses position:absolute. It means that it's positioned with respect the nearest ancestor with a position other than static (refs: https://www.w3.org/TR/css-position-3/#comp-abspos and https://www.w3.org/TR/css-position-3/#containing-block). Adding position:relative to the div.data-floating-menu-container in your CodePen seems to fix the issue you described. Hope it helps.

travis1111 · 2018-07-25T14:06:47Z

thanks. but the y position is off... I added one more, you can see y position is doubled...

https://codepen.io/anon/pen/QBgbVJ/

asudoh · 2018-07-25T22:46:12Z

There is an option in overflow menu for you, which is objMenuOffset. An object with top and left properties, or a function returning such object can be set there. In this way you can adjust the overflow menu’s position tailored for your application’s structure. Options in Carbon vanilla classes/instances can be set via the second argument when you instantiate it (the .create() API: https://github.com/IBM/carbon-components/tree/53bfbcf/src/globals/js/mixins#creation). Hope it helps.

travis1111 · 2018-07-26T16:22:54Z

Thanks I have made this working

https://codepen.io/anon/pen/QBgbVJ/

But I don't understand why I had to add a callback to adjust the position. Also do you mind check if the code I have on codepen makes sense?

Also I used the same code (as above) in our project, the objMenuOffset callback is not called at all. Is there anything preventing it from calling?

asudoh · 2018-07-26T22:14:45Z

Hi @travis1111 good question - What floating menu, the underlining mechanism of overflow menu, does is getting the position of the trigger button relative to the top/left corner of the viewport via CSSOM API and setting the top/left position of the menu based on that. Though we know that this is not something that will work for every usage pattern of floating menu, we also know that an attempt to support every usage pattern is almost impossible and tend to cause bloated, error-prone code. From that reason, what we do is setting the position that works for the most common pattern and provide an API to adjust the menu position.

BTW I see objMenuOffset callback is called in your CodePen. Note that it's called when the menu opens.

travis1111 · 2018-07-27T13:48:33Z

Thanks @asudoh

Yes, the callback in codepen works, but it did not work in our project. Is there any settings to prevent it from calling? is the callback only available in latest version?

asudoh · 2018-07-27T14:47:59Z

@travis111 The most possible cause is the component was instantiated already before you tried to instatiate it with the option. Static components property has all the instances mapped with DOM elements and you may want to look into that.

travis1111 · 2018-07-27T14:56:06Z

Thanks but I have this code

parent.insertAdjacentHTML ("beforeend",html);
        var offset = function () {
        	    console.log("in offset");
        	    return {top:0, left:100};
        }
        var options = { objMenuOffset: offset };
        
        CarbonComponents.OverflowMenu.create(document.getElementById("overflowmenu-" + project.projectID), {objMenuOffset: offset });

and if I comment out CarbonComponents.OverflowMenu.create.... then when I click the overflow menu (3 dots), nothing happens...

asudoh · 2018-07-27T15:01:17Z

@travis111 You may want try debugging: https://github.com/IBM/carbon-components/blob/b8276de/src/components/floating-menu/floating-menu.js#L156

travis1111 · 2018-07-27T16:33:26Z

Still don't know why...

this is what shows in the debugger of my project:

and step in:

and this is what shows in codepen:

When the _changeState.apply is called, the codepen source has the correct offset object which is a callback I defined, but in my project it is replaced by getMenuOffset from carbon component.

asudoh · 2018-07-27T21:58:45Z

@travis1111 You may want to debug the .create() then: https://github.com/IBM/carbon-components/blob/0336425/src/globals/js/mixins/create-component.js#L45

Whether or not your option is applied or not will be determined by if there is an existing instance, as the code shows.

travis1111 · 2018-07-30T14:40:06Z

@asudoh I changed the source code and ran it in the debugger, no existing components, as you can see from the debugger below. So what I do next?

asudoh · 2018-07-30T22:08:43Z

@travis1111 I see you are using “flip mode” of floating menu. My apologies not imagining you using that, but the option to use for flip mode is objMenuOffsetFlip instead of objMenuOffset: https://github.com/IBM/carbon-components/blob/53bfbcf/src/components/overflow-menu/overflow-menu.js#L117-L119

travis1111 · 2018-08-01T16:26:30Z

thanks change to objMenuOffsetFlip now it calls the call back, but the position is still not right. When are you going to be online tomorrow? do you mind I sametime you?

asudoh · 2018-08-01T18:10:59Z

Hi 👋 I recently got a document update, which you may want to refer to: https://github.com/IBM/carbon-components/tree/ad19b01/src/components/overflow-menu#example---changing-menu-position-by-8-pixels-vertically

You can search for channels with Carbon names in our internal communication tool to reach out to us internally.

tw15egan changed the title ~~OVerflow menu doesn't scroll with page~~ Overflow menu doesn't scroll with page Jun 20, 2018

alisonjoseph added bug labels Jun 22, 2018

asudoh mentioned this issue Jun 28, 2018

feat(FloatingMenu): support for specifying target container carbon-design-system/carbon-components-react#1041

Merged

asudoh closed this as completed Jul 3, 2018

asudoh added a commit to asudoh/carbon-components that referenced this issue Jul 6, 2018

docs(floating-menu): update READMEs for data-floating-menu-container

fad1e4c

Refs carbon-design-system#911.

asudoh mentioned this issue Jul 6, 2018

docs(floating-menu): update READMEs for data-floating-menu-container #961

Merged

tw15egan pushed a commit that referenced this issue Jul 6, 2018

docs(floating-menu): update READMEs for data-floating-menu-container (#…

885e83d

…961) Refs #911.

tw15egan mentioned this issue Jul 6, 2018

Overflow menu alignment issue in Firefox #877

Closed

jakubfaliszewski mentioned this issue Apr 1, 2020

[Tooltip/Overflow menu] Problems with absolute positioned components in scrollable elements #5768

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Overflow menu doesn't scroll with page #911

Overflow menu doesn't scroll with page #911

travis1111 commented Jun 19, 2018

travis1111 commented Jun 19, 2018

alisonjoseph commented Jun 20, 2018

travis1111 commented Jun 22, 2018

travis1111 commented Jun 22, 2018

tw15egan commented Jun 22, 2018 •

edited

Loading

travis1111 commented Jun 25, 2018 •

edited

Loading

asudoh commented Jun 25, 2018

travis1111 commented Jun 26, 2018

asudoh commented Jun 26, 2018

asudoh commented Jun 28, 2018

asudoh commented Jul 3, 2018

travis1111 commented Jul 4, 2018

asudoh commented Jul 5, 2018

travis1111 commented Jul 5, 2018

asudoh commented Jul 6, 2018

travis1111 commented Jul 24, 2018

asudoh commented Jul 24, 2018

travis1111 commented Jul 25, 2018

asudoh commented Jul 25, 2018

travis1111 commented Jul 26, 2018 •

edited

Loading

asudoh commented Jul 26, 2018

travis1111 commented Jul 27, 2018

asudoh commented Jul 27, 2018

travis1111 commented Jul 27, 2018

asudoh commented Jul 27, 2018

travis1111 commented Jul 27, 2018

asudoh commented Jul 27, 2018

travis1111 commented Jul 30, 2018

asudoh commented Jul 30, 2018

travis1111 commented Aug 1, 2018

asudoh commented Aug 1, 2018

Overflow menu doesn't scroll with page #911

Overflow menu doesn't scroll with page #911

Comments

travis1111 commented Jun 19, 2018

Detailed description

Steps to reproduce the issue

Additional information

Add labels

travis1111 commented Jun 19, 2018

alisonjoseph commented Jun 20, 2018

travis1111 commented Jun 22, 2018

travis1111 commented Jun 22, 2018

tw15egan commented Jun 22, 2018 • edited Loading

travis1111 commented Jun 25, 2018 • edited Loading

asudoh commented Jun 25, 2018

travis1111 commented Jun 26, 2018

asudoh commented Jun 26, 2018

asudoh commented Jun 28, 2018

asudoh commented Jul 3, 2018

travis1111 commented Jul 4, 2018

asudoh commented Jul 5, 2018

travis1111 commented Jul 5, 2018

asudoh commented Jul 6, 2018

travis1111 commented Jul 24, 2018

asudoh commented Jul 24, 2018

travis1111 commented Jul 25, 2018

asudoh commented Jul 25, 2018

travis1111 commented Jul 26, 2018 • edited Loading

asudoh commented Jul 26, 2018

travis1111 commented Jul 27, 2018

asudoh commented Jul 27, 2018

travis1111 commented Jul 27, 2018

asudoh commented Jul 27, 2018

travis1111 commented Jul 27, 2018

asudoh commented Jul 27, 2018

travis1111 commented Jul 30, 2018

asudoh commented Jul 30, 2018

travis1111 commented Aug 1, 2018

asudoh commented Aug 1, 2018

tw15egan commented Jun 22, 2018 •

edited

Loading

travis1111 commented Jun 25, 2018 •

edited

Loading

travis1111 commented Jul 26, 2018 •

edited

Loading