Menu icon Foundation
F6 Dropdown Positioning

I have a dropdown that I have positioned to 'bottom' which is working fine, but I want to control the positioning to be either centered on the parent element (similar to how action sheets work in Foundation for Apps). Alternatively (or in addition) I could align the menu to the right of the element.

I tried using a negative hOffset value but that looks like it doesn't take negative values and only works for positioning on left/right.

It seems like I should be able to do this with CSS, but the JS always compensates for negative margin, and I'm out of ideas. Foundation 5's dropdown plugin had hooks to position as needed, however F6's dropdown seems quite limited in customization. Is this a limitation of the plugin or am I missing something?

Dropdown positioni

sitesdropdownjavascript

I have a dropdown that I have positioned to 'bottom' which is working fine, but I want to control the positioning to be either centered on the parent element (similar to how action sheets work in Foundation for Apps). Alternatively (or in addition) I could align the menu to the right of the element.

I tried using a negative hOffset value but that looks like it doesn't take negative values and only works for positioning on left/right.

It seems like I should be able to do this with CSS, but the JS always compensates for negative margin, and I'm out of ideas. Foundation 5's dropdown plugin had hooks to position as needed, however F6's dropdown seems quite limited in customization. Is this a limitation of the plugin or am I missing something?

Dropdown positioni
Nathan almost 4 years ago

I figured out a solution, which i'm not super excited by, but I thought i'd pass along. You can apply negative margin and/or position the dropdown if you apply the css only to the dropdown-pane with an 'is-open' state. The dropdown-pane is absolutely positioned by JS without that class.

.dropdown-pane {
    &.small {
        &.is-open {
            margin-left:-100px;
        }
    }
}

I think it would be useful to have greater flexibility in positioning built into the plugin itself.