Height is not being set properly

[sagarnayak]

I have added the required partials to my layouts/_default/partials

but the height is not being set properly.

{{- /* Comments with cusdis.com */ -}}

<h2>Discussion:</h2>
<div id="cusdis_thread" data-host="https://auth.blog.hardcode.online" data-app-id="818a5966-bc74-4"
    data-page-id="{{ .File.UniqueID }}" data-page-url="{{ .Permalink }}" data-page-title="{{ .Title }}">
</div>
<script defer src="https://auth.blog.hardcode.online/js/widget/lang/fr.js"></script>
<script async defer src="https://auth.blog.hardcode.online/js/cusdis.es.js"></script>

{{- /* Comments area end */ -}}

and in single HTML

    <footer class="post-footer">
        {{/* Comments */}}
        {{- partial "comments.html" . }}
        <h4>Commentsss:</h4>
        {{- $tags := .Language.Params.Taxonomies.tag | default "tags" }}
        <ul class="post-tags">
            {{- range ($.GetTerms $tags) }}
            <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
            {{- end }}
        </ul>
        {{- if (.Param "ShowPostNavLinks") }}
        {{- partial "post_nav_links.html" . }}
        {{- end }}
        {{- if (and site.Params.ShowShareButtons (ne .Params.disableShare true)) }}
        {{- partial "share_icons.html" . -}}
        {{- end }}
    </footer>

    {{- if (.Param "comments") }}
    {{- partial "comments.html" . }}
    {{- end }}
</article>

{{- end }}{{/* end main */}}

what might be the reason? do i have to add some CSS here ?

this is what i see in my blog

this should take the proper required height. instead this is taking a fixed height.

[Pseudowang]

Hi, maybe you can take a look at this issue, Issues#233. I encountered the same problem, and it seems to be related to the iframe. When I switched my Docker image 'djyde/cusdis' to version 1.3.2, everything went back to normal.

[carl0schen]

I'm having the same problem with my comment system hosted at cusdis.com.

[seburbandev]

I was having the same problem where the height property wasn't set and I was getting a small window with a scroll bar.

I am using the free tier, hosted at cusdis.com and using the embed code provided.

I've come up with a workaround by writing a short script to resize the iframe on page load.

If you're using the embed code provided like I am, which looks like this

<div id="cusdis_id_here"
 data-host="https://cusdis.com"
 data-page-id="{{ PAGE_ID }}"
 data-page-url="{{ PAGE_URL }}"
 data-page-title="{{ PAGE_TITLE }}">
</div>

Then here is the script you need to include on your page to resize the iframe on each page reload.

window.addEventListener('load', function () {
            setTimeout(() => {
                let scrollHeight = document.querySelector("#cusdis_id_here iframe").contentWindow.document.body.scrollHeight;
                document.querySelector("#cusdis_id_here iframe").style.height = scrollHeight + "px";
            }, 3000);
        });

I had to add the timeout because the iframe seems to take awhile to load so we want to make sure the element we're targeting actually exists in dom.

Adjust the timeout as you like, but considering comments are usually at the bottom of the page (and users usually don't scroll to the bottom straight away), it's safer to give the iframe more time to load than adjust its height prematurely.

Your mileage may vary.

[rnkdev]

I'm also facing the same problem with comments hosted on cusdis.com, any thoughts @djyde ?

@seburbandev Appreciate your work around, I'll try it on my site. But I think this should be fixed on the source because timeout feature is not reliable depending on network load etc.

[seburbandev]

@rnkdev I completely agree, this should be fixed on source, and my approach is hacky and by no means a proper solution so use with caution.

That said, it seems that this issue had been raised a couple of times a while ago and still no response. In my opinion, the scroll makes it unusable, which is a real shame, so in my case it was either this or an alternative. I'm going with the former for now.

[pentmo]

I'm having the same issue: free tier, not self-hosted.