[changed]Set the position of menu as "absolute" instead of "fixed"

[chenzhihao]

Set the position of menu as "absolute" so the menu can scroll and position correctly in dialog/modal.

This is also a very common way to style dropdown menu.

[ztratar]

Would love to see this soon! This is my #1 issue with this library right now -- looks very low quality for users if they happen to scroll.

[CMTegner]

You can override all of the menu styles, either via props.menuStyle or by applying styles directly in the props.renderMenu function.

[ztratar]

But left and top are calculated dynamically and will override most cases, no? On Thu, Aug 4, 2016 at 4:16 AM Christian Maughan Tegnér < [email protected]> wrote:

You can override all of the menu styles, either via props.menuStyle or by applying styles directly in the props.renderMenu function.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/reactjs/react-autocomplete/pull/75#issuecomment-237524766, or mute the thread https://github.com/notifications/unsubscribe-auth/AA6TLghPxmXDy98R-bmN7tUtEKRng5Mxks5qccnwgaJpZM4HfRj2 .

[CMTegner]

You don't have to apply all the styles, you can choose which to apply in props.renderMenu. You don't have to use props.menuStyle at all (or the style parameter passed to renderMenu).

[a-r-d]

@CMTegner I would like to see this merged, or at least the other version here: https://github.com/reactjs/react-autocomplete/pull/135 Let me know if there is anything I can do to help.

The position fixed + calculating a top position + setting a max height ends up being pretty awkward in practice. We ended up having to do this on our project to deal with the usability issues. Hope this helps someone:

someSelectorForTheMenuComponentGoesHere {
   position: absolute !important;
   max-height: auto !important;
   top: auto !important;
}