Not possible to apply a class on the input element

[h3llrais3r]

Hi, Thanks for your support for the ng-emoji-picker, but I see that it's not possible to apply a class on the input element. Example:

<emoji-input [(model)]="messageWithEmoji" class="form-control" style="display: inline-block;" (onEnter)="onEnter()" (click)="openPopup(false)" (setPopupAction)="setPopupAction($event)"></emoji-input>

This applies the style on <emoji-input> element, not on the nested <input> element.

Can you provide a class="..." option so it' can be applied on the internal input element? (same when using a textarea)

[lbertenasco]

Hi @h3llrais3r ! Have you tried using :host /deep/ in your css to inject your stiles into emoji-input ?

[h3llrais3r]

Hi @lbertenasco Yes that's the workaround I'm using now, but :host /deep/ is deprecated (https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep), so an input option should be better. 😉

[lbertenasco]

Just released version 1.2.1 can you try that out? Added:

  @Input() inputClass = '';
  @Input() searchClass = '';

[h3llrais3r]

Thanks, it works for the inputClass but for some kind of reason it doesn't seem to take my searchClass unless I'm using again /deep/. Any idea?

.mySearchClass {
  /*This is the bootstrap form-control height*/
  margin-top: 34px;
}

When I'm adding /deep/ before mySearchClass, the offset works

/deep/ .mySearchClass {
  /*This is the bootstrap form-control height*/
  margin-top: 34px;
}

[lbertenasco]

I'll debug this today and let you know. Glad at least 1 of them is working 😅

[zamananjum0]

Please deploy the demo of this module.

[Amber711]

@lbertenasco @h3llrais3r Hi, i am running into the same problem. Did any of you ever figure it out?... thanks

[h3llrais3r]

@Amber711 Version 1.2.1 partially fixes the problem. The only thing that is left is the styling of the dropdown that still needs the /deep/ in order to get it styled. @lbertenasco is still investigating this one as he said some comments above.

[lbertenasco]

Hi @h3llrais3r Please use the searchClass as an input:

[searchClass]="myCustomClass"

this.myCustomClass = 'red-background';

Hi @Amber711 What seems to be your issue? Can you add more information? Thanks!

BTW: I created a demo project, so feel free to check that out :) https://github.com/lbertenasco/ng-emoji-picker-demo

Feel free to re-open this issue :)

[h3llrais3r]

@lbertenasco It does work indeed, even without using it as an input. For some kind of reason, it doesn't apply the style in combination with bootstrap (added in .angular-cli.json). If I add my custom search class in my global styles.css, it's applied. Thanks again!

[Amber711]

@lbertenasco @h3llrais3r hi guys! As @h3llrais3r indicated, we just need to added /deep/ in order to style the dropdown. Thank you so much for your help!!! : )