Question: Is it possible and how to specify width: 100% for picker?

[AFDevMike]

I see that width is computed here:
https://github.com/TypeCtrl/ngx-emoji-mart/blob/0ec517cb0b12a61540bc0b63fa592cca52d11f53/src/lib/picker/picker.component.html#L2

Need to have a picker that fits a re-sizeable chat container <div>.

Tried many things:
Editing the div .emoji-mart 's width in console to 100% behaves as desired.
The following does not work.
<emoji-mart title="Pick your emoji…" emoji="point_up" [style]="{ width: '100%' }"></emoji-mart>

[scttcper]

the width decides how many emoji will be in each row and how far to scroll when using the categories

[AFDevMike]

I am able to use this:

TS:

@ViewChild('emojiPicker', { read: ElementRef }) emojiPicker: ElementRef;
constructor( private renderer: Renderer2) { }

   public ngAfterViewInit() { 
      const el = this.emojiPicker.nativeElement.querySelector('.emoji-mart');
      this.renderer.setStyle(el, 'width', '100%');
}

Template:
<emoji-mart #emojiPicker title="Pick your emoji…" emoji="point_up"></emoji-mart>

Re:

the width decides how many emoji will be in each row and how far to scroll when using the categories

If there is a more direct way to set the width directly please let me know.

[scttcper]

🎉 This issue has been resolved in version 0.14.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀