Emojis popup position

[dfloresgonz]

Is there a way to open the popup of emojis in another position, look at my image I am not able to see the emojis when the popup is opened near the bottom of the page.

[dfloresgonz]

Solved: I had to edit the sources (It should be parametrized) but I got it. I had to edit the tether values. In jquery.emojiarea.js

Line 790 EmojiMenu.prototype.reposition = function() { I edited the offset values the from '0 12px' to '80px 12px' this means it will move up 80px

[libofeng]

I move the position by jquery: $('.emojiPicker').css({left: left + 'px', top: (top - 360) + 'px'});

[alexia-Shen]

Is that possible to make the position responsive?

[ganya-qwe]

but how to edit position if i had lib installed via npm, and i have gulp, so edit source files is not a solution of problem

[hugoforeyes]

If your input field is fixed, you can fix this problem by css: .emoji-menu { bottom: 110px !important; transform: none !important; position: fixed !important; right: 75px !important; left: auto !important; top: auto !important; }

[jithinrajpr]

I had this same issue. We can solve with without editing the file by: When you init this plugin use the following code:

$('.smm_message_box').emojiPicker({
        width: '300px',
    height: '200px',
    position: 'right',
    onShow: function () {
           var emg = setInterval(() => {
             if ($('.emojiPicker:visible').length >= 1) {
               var Left = parseInt($('.emojiPicker:visible').css('left'))
                 Top = parseInt($('.emojiPicker:visible').css('top'));
                 $('.emojiPicker:visible').css({ left: (Left - 50) + 'px', top: (Top - 220) + 'px' }).addClass('visible');
                 clearInterval(emg);
            }
        }, 20);
    },
    onHide: function () {
            $('.emojiPicker').removeClass('visible');
    }
});

Some CSS to mask it smooth:

.emojiPicker{
         opacity: 0;
    transition: opacity ease-in-out 0.8s;
}
.emojiPicker.visible{
    opacity: 1;
}

[bLeveque42]

I was simply trying to have the Emojis menu opening above (not below) the icon.

I just added this to my CSS and it worked:

.emoji-menu { bottom: 60px!important; }