Why the outer div doesn't get height style automatically?

[KENNYSOFT]

I recently add this on my site, and discovered that outer div's height style is not set automatically. So it remains 0px height, and I cannot see anything. If I manually change height to some value like 500px, then the content is showed.. Can't know why 😢

[jdanyow]

please share a link to the page that has the height issue

[KENNYSOFT]

https://blog.kennysoft.kr/2018-05-25-web/ this page

[jdanyow]

I suspect it has something to do with your emoji script or the mathjax script.

Try a process of elimination- comment out all this code:

<script src="https://unicodey.com/js-emoji/lib/emoji.js" type="text/javascript"></script>
<script>
$.fn.emoji=function(){
    var emoji=new EmojiConvertor();
    emoji.replace_mode="unified";
    return this.each(function(){
        $(this).html(function(i,oldHtml){
            return emoji.replace_colons(oldHtml);
        });
    });
};
$(".markdown-body").emoji();
</script>
<script src="https://fat.github.io/zoom.js/js/zoom.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>
<script>
var imgs=document.querySelectorAll("p > img");
for(var i=0;i<imgs.length;++i)
{
    imgs[i].parentNode.style.textAlign="center";
    imgs[i].setAttribute("data-action","zoom");
}
</script>

Then add parts back in, one by one, until you find the conflicting script.

[KENNYSOFT]

Oh, emoji is the problem. When I deleted this part, it works well.

<script>
$.fn.emoji=function(){
    var emoji=new EmojiConvertor();
    emoji.replace_mode="unified";
    return this.each(function(){
        $(this).html(function(i,oldHtml){
            return emoji.replace_colons(oldHtml);
        });
    });
};
$(".markdown-body").emoji();
</script>

Hmm, I should investigate how to use both. Thanks!

[jdanyow]

I think if you put utterances outside of the element with class="markdown-body" it will work.

[KENNYSOFT]

Thanks, confirmed working. Looking for more good way to treat it.