Emojione Area defined textarea didn't except any overwritten CSS fix

Question

I am using the latest Emojione Area in my project. My textarea is something like this :

<textarea id="emojionearea" style="display:none"></textarea>

I am using the latest jQuery v3.4.1 min library. My code is something like this:

$("#emojionearea").emojioneArea();

But my problem arises here. I can't change the styles of the textarea any more. I tried some CSS even with !important to overwrite the default styles bit nothing happens. I want the following CSS:

#emojionearea {
    width: 100vw!important;
    position: fixed!important;
    bottom: 0!important;
}

So, is there any way? Thanks in advance.

score 3 · Accepted Answer · edited Apr 25 '21 at 19:58

You have to do something like this to overcome the problem:

.myCustomCss {
   width: 100vw!important;
   position: fixed!important;
   bottom: 0!important;
}

Done! The rest of the code is okay. Just update your textarea to:

<textarea class="myCustomCss" id="emojionearea"></textarea>

Note: You can't add CSS directly to your textarea. Instead nest all your CSS in a class and then add it the the textarea before you declare its id. Why? That's called inheritance.

score 0 · Answer 2 · answered Jan 03 '20 at 13:11

This won't work like that . Enclose your textarea in a div and change the properties of your div to change properties of your textarea.

$(document).ready(function(){
$("#myTextarea").emojioneArea(
{
pickerPosition  :"bottom"
}
);
});

.myDiv{
width:20rem;
height:10rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.css" rel="stylesheet"/>


<div class="myDiv">
<textarea id="myTextarea">

</textarea>
</div>

score 0 · Answer 3 · answered Jun 27 '21 at 14:41

Add the style at the top of the HTML file and use a custom class name to override the styles of emojioneArea plugin

$("#myTextarea").emojioneArea({
  pickerPosition: "bottom",
  filtersPosition: "bottom",
  tonesStyle: "square",
  shortnames: true,
  tones:false,
  search:false,
  placeholder: "Message (optional)",
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.2/emojionearea.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.2/emojionearea.css" rel="stylesheet"/>

<style>
.custom{
   width:500px;
   height:70px;
   background-color: rgb(0, 141, 228, 0.1);
}
</style>

<textarea class="custom" id="myTextarea"></textarea>

Emojione Area defined textarea didn't except any overwritten CSS fix

3 Answers3