claviska/jquery-dropdown — pull request #17 by plapier (2013-02-16 19:05:44+00:00)
Title: Added support for positioning dropdowns relative-to-parent.

Note: to make this easier to work with my current setup, I changed the JS to use soft tabs (2 spaces) and cleaned up extra whitespace. Soft-tabs are recommended for cross-environment rendering.
____

To start, I found this plugin to be very useful for a project I'm currently working on. My layout depends on using dropdowns inside a fixed position element, like a header for instance.

When scrolled to the top of the document, the dropdowns position fine with the current implementation, but once you scroll the document and click a dropdown-trigger, the dropdowns position incorrectly. This is caused because the dropdowns are being positioned using the `.offset()` method, which calculates position **relative to the document**.

I made a demo using the current build: http://jsfiddle.net/plapier/VW94U/

*Note: Scroll the `results` panel slightly, then click the dropdown-trigger. You can see the incorrectly positioned dropdown.*
____

In order to make the dropdowns position correctly in a fixed position element, I've added a `position-relative` class:
````html

{{ content }}

````
This class will trigger the dropdown to be positioned **relative to the offset parent**, using the `.position()` method.

This also requires the dropdowns to be placed **inside the parent element** you want it to be positioned relatively to, as opposed to immediately before your closing body tag, as recommended in the docs. Example:

````html

My Button

{{ content }}

````

I've created a demo based off my changes to the JS: http://jsfiddle.net/plapier/d859h/

The demo shows the differences between the `offset()` method and the `position()` method.

*Note: Remember to scroll the `Result` panel slightly and click the trigger to view the differences.*

The new code also takes the trigger's margins into consideration for accurate dropdown positioning or a `dropdown-relative` element.
____

I think the additional `dropdown-relative` class fits into your current approach for the plugin.

I was also thinking about changing the class name to `downdown-relative-to-parent`, but that seemed too long.

Let me know your thoughts.

Thanks for the plugin! :smiley: