PiotrS PiotrS - 1 month ago 14
CSS Question

Two Emojione area in one page

I have big problem, because I would like set two different emojioneare in one page (in textarea) but I can't change height of this emojionearea.

HTML

<textarea id="Emoji" ></textarea>
<textarea id="Emoji1"></textarea>


JQ

$(document).ready(function() {
$("#Emoji").emojioneArea({});
});

$(document).ready(function() {
$("#Emoji1").emojioneArea();
$('.emojionearea').css({height:'500px'})
});


And the problem is that css() in jq not working

Thanks for your help and time`

mx0 mx0
Answer

You have to put textarea inside container and then set style on .emojionearea-editor element.

HTML

<div id="container1">
  <textarea id="Emoji1"> 3em height</textarea>
</div>
<br>
<br>
<div id="container2">
  <textarea id="Emoji2"> 9em height</textarea>
</div>

CSS

#container1 .emojionearea-editor {
  min-height: 3em !important;
}

#container2 .emojionearea-editor {
  min-height: 9em !important;
}

JS

$(document).ready(function() {
  $("#Emoji1").emojioneArea({
    pickerPosition: "bottom",
    tonesStyle: "bullet",
  });
  $("#Emoji2").emojioneArea({
    pickerPosition: "bottom",
    tonesStyle: "bullet",
  });
});

Working example https://jsfiddle.net/dorjv2ej/