Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Dropdown menu cropped and not automatically adjusted to left/right #1171

Closed
sinedied opened this issue Jan 3, 2017 · 2 comments
Closed

Dropdown menu cropped and not automatically adjusted to left/right #1171

sinedied opened this issue Jan 3, 2017 · 2 comments
Labels
component: dropdown type: feature

Comments

@sinedied
Copy link

sinedied commented Jan 3, 2017

Bug description:

When using the predecessor ui-bootstrap dropdown component, the dropdown menu would automatically switch to being on the left or right if needed to avoid being cropped.

This is not the case with the current ng-bootstrap dropdown component, as seen in the provided plunker: when the dropdown is floated the right, the menu is cropped and goes off-screen instead of being switch to the right.

This is problematic in responsive scenario, like when using a right-floated dropdown in a responsive navbar with a collapse: the dropdown menu should be attached to the right when in "desktop mode" and the dropdown is floated to the right, and it should be on the left when the dropdown is not floated (in the collapsed menu). The scenario was working without additional code in Bootstrap 3 with ui-bootstrap.

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/Jb2MzMSjOXt2M6UJkwq9?p=preview

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 2.4.1

ng-bootstrap: 1.0.0-alpha.15

Bootstrap: 4.0.0-alpha.5
@ghost
Copy link

ghost commented Jul 24, 2017

Thats still a thing in alpha 6.

This was referenced Aug 16, 2017
Closed
Closed
pkozlowski-opensource added a commit that referenced this issue Aug 22, 2017
@pkozlowski-opensource
fix(dropdown): restore support for dropups
c7a16a5 
Fixes #1747
Part of #1171
Part of #1012

BREAKING CHANGE:

The `up` input is no longer supported by you can use more flexible
`placement` setting now.

Before:

```html
<div ngbDropdown [up]="true">
```

After:

```html
<div ngbDropdown placement="top-right">
```

Closes #1752
@pkozlowski-opensource
Copy link
Member

This will be fixed by #1814

rmeans pushed a commit to fcsa-teamhammer/ng-bootstrap that referenced this issue Oct 18, 2017
@pkozlowski-opensource @fcsa-teamhammer
fix(dropdown): restore support for dropups
5c71f91 
Fixes ng-bootstrap#1747
Part of ng-bootstrap#1171
Part of ng-bootstrap#1012

BREAKING CHANGE:

The `up` input is no longer supported by you can use more flexible
`placement` setting now.

Before:

```html
<div ngbDropdown [up]="true">
```

After:

```html
<div ngbDropdown placement="top-right">
```

Closes ng-bootstrap#1752
rmeans pushed a commit to fcsa-teamhammer/ng-bootstrap that referenced this issue Oct 18, 2017
@mschoudry @fcsa-teamhammer
feat(dropdown): auto and array support in placement
a0f4c55 
Closes ng-bootstrap#1171
Closes ng-bootstrap#1814
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: dropdown type: feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@sinedied @pkozlowski-opensource