react-autocomplete icon indicating copy to clipboard operation
react-autocomplete copied to clipboard

Use 'absolute' positioning for menu instead of 'fixed'

Open cdevienne opened this issue 10 years ago • 3 comments

The 'fixed' approach has a major downside:

The 'fixed' referential may not be the document when a parent node has CSS transforms. But getBoundedClientRect() remains relative to the document no matter what. Calculating a fixed position from it is difficult.

Using 'absolute' positioning makes things a lot easier. It is how bootstrap dropdown menu works for example.

cdevienne avatar Jan 20 '16 20:01 cdevienne

Also, on pages that have enough content to have a scroll, position: fixed fails horribly.

mihaibogdan10 avatar Nov 29 '16 10:11 mihaibogdan10

@cdevienne There's no need for that maxWidth hack now, having position relative on the parent makes width: 100% work just fine 😄

mihaibogdan10 avatar Nov 29 '16 10:11 mihaibogdan10

Just a heads-up (in case you're waiting for this PR to land): You can fully customize the dropdown menu by using props.menuStyle and props.renderMenu.

We'll probably be removing most of the default menu styles for 2.0, possibly only keeping the absolute coordinates which are passed to props.renderMenu (although you could calculate this yourself if we added support for rendering custom components instead of just fragments for the menu).

CMTegner avatar Dec 30 '16 12:12 CMTegner