title: How to add emoji picker with a text field
body: <p>I'm working on Rails project. I have to add a emoji picker. I am using this library <a href="https://github.com/OneSignal/emoji-picker" rel="nofollow noreferrer">emoji picker</a></p>
  
  <p>My application.erb.html is </p>
  
  <pre><code>    &lt;p class="modal-content"&gt;
        &lt;%= simple_form_for current_user, locals:{ controller: :dashboards ,action: :update } do |f| %&gt;
        &lt;p class="emoji-picker-container"&gt;
        &lt;%= f.text_field :mood, data: { emojiable: true }, maxlength: 3, required: 'required', disabled: 'disabled' %&gt;
        &lt;%= f.hidden_field :mood_date, value: DateTime.now.to_date  %&gt;
       &lt;/p&gt;                  
  
       &lt;%= f.button  :submit , value: t('button.submit') %&gt;
       &lt;% end %&gt;
     &lt;/p&gt;
  </code></pre>
  
  <p>inline script:</p>
  
  <pre><code>&lt;script&gt;
        $(function() {
            // Initializes and creates emoji set from sprite sheet
            window.emojiPicker = new EmojiPicker({
                emojiable_selector: '[data-emojiable=true]',
                assetsPath: 'http://onesignal.github.io/emoji-picker/lib/img/',
                popupButtonClasses: 'fa fa-smile-o'
            });
  
            window.emojiPicker.discover();
        });
  &lt;/script&gt;
  </code></pre>
  
  <p>Output as like:
  <a href="https://i.stack.imgur.com/sFk27.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sFk27.jpg" alt="enter image description here"></a></p>
  
  <p>But problem is here, I want that no pop will come and emoji box will be fixed as like:</p>
  
  <p><a href="https://i.stack.imgur.com/aTe1l.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aTe1l.jpg" alt="enter image description here"></a></p>