Created
October 31, 2019 14:56
-
-
Save MurhafSousli/9eae8d569572da8d94d0911cd3cb142f to your computer and use it in GitHub Desktop.
Test ng-scrollbar auto-height with root DOM
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Remove `ngStyle` from `.ng-scrollbar-wrapper` in the template | |
<div class="ng-scrollbar-wrapper" [ngAttr]="state" [ngStyle]="autoHeightStyles"> | |
To | |
<div class="ng-scrollbar-wrapper" [ngAttr]="state"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ng-scrollbar { | |
position: relative; | |
display: block; | |
width: 100%; | |
height: 100%; | |
max-height: 100%; | |
min-height: 100%; | |
max-width: 100%; | |
min-width: 100%; | |
} | |
.ng-scrollbar-wrapper { | |
// comment the following | |
//height: 100%; | |
//max-height: 100%; | |
//min-height: 100%; | |
//max-width: 100%; | |
//min-width: 100%; | |
} | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@Component({ | |
selector: 'ng-scrollbar', | |
// add the following to host element | |
host: { | |
'[class.ng-scrollbar]': 'true', | |
'[style.height]': 'autoHeightStyles?.height', | |
'[style.width]': 'autoHeightStyles?.width', | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment