Fix: Make dropdown respect boundaries of browser Foundation 5

[coreysyms]

See it in action here: http://www.tangerineindustries.com/download/Foundation_Dropdown/index.html

[soraphis]

the width of the dropdown should be independent of the colum-width of the parent.

set the size of your columns from large-6 medium-12 to large-2 medium-2 (or even 1) it results to rly small dropdowns.

[coreysyms]

@soraphis You bring up an interesting point and something I struggled with not on a technical level, but a hypothetical level. By default how I'm displaying the drop down is the same as Foundation 5 raw, but should it be this way?

The docs say medium drop down, up to max-width:500px. So that means the drop down will respect the parent width up to a max of 500. But in your case, a medium drop down in a large-2 looks like a small.

You can override this in the CSS on line 5302 foundation.css in .f-dropdown.medium. Just add a min-width. Im debating if I should write this in automatically.

Thoughts?

[soraphis]

Imho it should be independent of the parent size.
i think it should be just dependent off "small / medium (default) / large / ..."

[coreysyms]

@soraphis I think I might write in a new option, something like, "override parent width" to allow the max width even if the parent is not. Stay tuned.

[rafibomb]

My opinion on this is that it should be independent. The only time I can see it needing to respect the parent element width is using a button group. We have a mega class for dropdowns now that spans the full width of a row.

[rafibomb]

@coreysyms Hey awesome work iterating and making this happen. We'll keep testing on master with different setups.

Shoot us an email to foundation at zurb .com for a Yeti t-shirt. Need your mailing address and size.

[coreysyms]

@rafibomb Thanks, Emailed. My company and I use Foundation a lot, so I'm glad I got to give back a little. Will start another pull request once I figure out independent child sizing for the drop down box.

[istrasoft]

Cool, but not possible any more to choose which alternate directions should the dropdown use when the desired direction does not have enough space ?...

[LauraLalune]

+1 @soraphis
I still have problems with 5.5 release. I finally fixed via css !important declaration on the .open class applied to the specific dropdown element

&.open {
    right: 134px!important; left: auto!important;
}
&:before{
    border-bottom-color:$body-copy;
    right: 21px!important; left:auto !important;
}

anyone else who still experiences the problem?