CODEWITHSUNDEEP
jqueryhtmlcssemoji
Pritesh Bhoi
Pritesh Bhoi

Reputation: 1096

Emoji symbol at left and emoji box also left side using plugin

I am developing a new chatbot. in this, I am created input just like WhatsApp web. I face trouble to take the emoji symbol before the input tag.

My code is below

$("#mytext").emojioneArea({
  pickerPosition: "bottom"
});
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.js"></script>
<div>
  <input type="text" id="mytext" />
</div>

I am trying to build this type of input

input style

and emoji panel opens above from smiley

emoji also open left side

Upvotes: 2

Views: 1691

Answers (1)

Keith
Keith

Reputation: 4147

I would do the pseudo-code but if you're going off of javascript in which html is created, then you can do this:

.emojionearea{
  margin-left: 25px;
  position: relative;
  width: 300px;
}

.emojionearea-button{
  position: absolute;
  left: -30px;
}

https://jsfiddle.net/d9gsvjrq/

Upvotes: 2

Related Questions