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

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

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.

Solution

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.