New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Make dropdown respect boundaries of browser Foundation 5 #5986

Merged
merged 5 commits into from Oct 30, 2014

Conversation

Projects
None yet
6 participants
@coreysyms
Collaborator

coreysyms commented Oct 29, 2014

@coreysyms coreysyms changed the title from Make dropdown respect boundaries of browser to Fix: Make dropdown respect boundaries of browser Oct 29, 2014

coreysyms added some commits Oct 29, 2014

Update foundation.dropdown.js
file failed with travis, resubmit
Update foundation.dropdown.js
travis failed, resubmitting, had undefined var.

@coreysyms coreysyms changed the title from Fix: Make dropdown respect boundaries of browser to Fix: Make dropdown respect boundaries of browser Foundation 5 Oct 29, 2014

@soraphis

This comment has been minimized.

Show comment
Hide comment
@soraphis

soraphis Oct 30, 2014

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.

soraphis commented Oct 30, 2014

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.

Update foundation.dropdown.js
Changes to fix medium grid break-point
@coreysyms

This comment has been minimized.

Show comment
Hide comment
@coreysyms

coreysyms Oct 30, 2014

Collaborator

@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?

Collaborator

coreysyms commented Oct 30, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@soraphis

soraphis Oct 30, 2014

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

soraphis commented Oct 30, 2014

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

@coreysyms

This comment has been minimized.

Show comment
Hide comment
@coreysyms

coreysyms Oct 30, 2014

Collaborator

@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.

Collaborator

coreysyms commented Oct 30, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@rafibomb

rafibomb Oct 30, 2014

Contributor

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.

Contributor

rafibomb commented Oct 30, 2014

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 rafibomb added the dropdown label Oct 30, 2014

hellapixels pushed a commit that referenced this pull request Oct 30, 2014

Arthur
Merge pull request #5986 from coreysyms/master
Fix: Make dropdown respect boundaries of browser Foundation 5

@hellapixels hellapixels merged commit c82e8a8 into zurb:master Oct 30, 2014

1 check passed

continuous-integration/travis-ci The Travis CI build passed
Details
@rafibomb

This comment has been minimized.

Show comment
Hide comment
@rafibomb

rafibomb Oct 31, 2014

Contributor

@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.

Contributor

rafibomb commented Oct 31, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@coreysyms

coreysyms Oct 31, 2014

Collaborator

@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.

Collaborator

coreysyms commented Oct 31, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@istrasoft

istrasoft Dec 13, 2014

Contributor

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

Contributor

istrasoft commented Dec 13, 2014

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

This comment has been minimized.

Show comment
Hide comment
@LauraLalune

LauraLalune Mar 23, 2015

+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?

LauraLalune commented Mar 23, 2015

+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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment