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

Add igxDropDown maxHeight input #3005

Merged
merged 7 commits into from
Nov 14, 2018
Merged

Add igxDropDown maxHeight input #3005

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7a959fc
feat(igxDropDown): introduce itemsMaxHeight property #3001
Lipata Nov 13, 2018
b1558d4
test(igxDropDown): test for max height #3001
Lipata Nov 13, 2018
4fc9a9b
docs(igxDropDown): changelog update #3001
Lipata Nov 13, 2018
9b4b2ce
test(igxCombo): adjust tests according to new dropdown structure #3001
Lipata Nov 13, 2018
6edeca0
test(igxDropDown): add more tests #3001
Lipata Nov 13, 2018
9d0a3ac
Merge branch '6.2.x' into nalipiev/dd-maxHeight
Lipata Nov 13, 2018
2c8c7e0
Merge branch '6.2.x' into nalipiev/dd-maxHeight
Nov 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ All notable changes for each version of this project will be documented in this
<igx-input-group [displayDensity]="'cosy'"> ... </igx-input-group>
```
- `igx-drop-down`:
- Added a new property `maxHeight`, defining the max height of the drop down.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be moved to a new section 6.2.1 as we already released 6.2.0.

- Added a new boolean argument `cancel` to the `onSelection` `ISelectionEventArgs`. Its default value is false, in case it is set to true, the drop down selection is invalidated.
- `igxIcon`:
- **Breaking change** `glyphName` property is removed from `IgxIconComponent`. For `Material` icons the icon name should be explicitly defined between the opening and closing tags. `Font Awesome` icons should use the `name` property now.
Expand Down
1 change: 1 addition & 0 deletions projects/igniteui-angular/src/lib/drop-down/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ The following inputs are available in the **igx-drop-down** component:
| :--- | :--- | :--- |
| `width` | string | Sets the tab width of the control. |
| `height` | string | Sets the tab height of the control. |
| `maxHeight` | string | defines drop down maximum height |
| `allowItemsFocus` | boolean | Allows items to take focus. |
| `id` | string | Sets the drop down's id. |

Expand Down
14 changes: 7 additions & 7 deletions projects/igniteui-angular/src/lib/drop-down/drop-down.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="igx-drop-down">
<div class="igx-drop-down__list" igxToggle (onOpening)="onToggleOpening($event)" (onOpened)="onToggleOpened()" (onClosing)="onToggleClosing($event)" (onClosed)="onToggleClosed()">
<ng-container *ngIf="!collapsed">
<ng-content></ng-content>
</ng-container>
</div>
</div>
<div class="igx-drop-down__list" igxToggle [style.maxHeight]="maxHeight"
(onOpening)="onToggleOpening($event)" (onOpened)="onToggleOpened()"
(onClosing)="onToggleClosing($event)" (onClosed)="onToggleClosed()">
<ng-container *ngIf="!collapsed">
<ng-content></ng-content>
</ng-container>
</div>
22 changes: 21 additions & 1 deletion projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ import {
Optional,
HostListener,
Directive,
Inject
Inject,
HostBinding
} from '@angular/core';
import { IgxSelectionAPIService } from '../core/selection';
import { IgxToggleDirective, IgxToggleModule } from '../directives/toggle/toggle.directive';
Expand Down Expand Up @@ -205,6 +206,25 @@ export class IgxDropDownBase implements OnInit, IToggleView {
this.toggleDirective.id = value;
}

@HostBinding('class.igx-drop-down')
cssClass = 'igx-drop-down';

/**
* Gets/Sets the drop down's container max height.
*
* ```typescript
* // get
* let maxHeight = this.dropdown.maxHeight;
* ```
*
* ```html
* <!--set-->
* <igx-drop-down [maxHeight]='200px'></igx-drop-down>
* ```
*/
@Input()
public maxHeight = null;

/**
* Gets if the dropdown is collapsed
*
Expand Down