Angular 7 - Labels cover lines and when scrolling moves with the scroll covering more

[joshstallnick]

When using this in Angular 7 the labels appear over available emojis which block them out. Also when scrolling the labels tend to move down to the middle of the set. I tried overriding the css but due to the dynamic generation it doesn't work as well.

Could we hook into when the category changes? It would be useful when the single category is set to true - then when changed I can just hide the innerHTML.

[scttcper]

does it happen for you in the demo?

[joshstallnick]

This demo? https://typectrl.github.io/ngx-emoji-mart/

It works as expected.

I will setup a blank project, try to pull it in, and report back

[joshstallnick]

Still had issues with a new project. I will mess with the dependencies and see if the Angular version matters.

Test repo I created: demo-emoji-mart-angular-7

[joshstallnick]

Updated (and pushed) Angular update - still no dice

[joshstallnick]

It seems with [isNative]=true it works just as intended.

The default of "apple" messes with the label positioning. Not sure if you want this closed and open as a different issue or just edit this to reflect the actual issue. Let me know

[UltraKenchie]

Confirming that it also covers the labels on this usage

<emoji-mart (emojiSelect)="selectEmoji($event)" set="twitter" title="Pick your emoji…"
   [showPreview]="false" [showSingleCategory]="true" [emojiTooltip]="true"></emoji-mart>

ngx-emoji-mart: v0.16.2

[scttcper]

🎉 This issue has been resolved in version 0.16.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀