Talk: Default comment box height is huge

[colourgarden]

Initially reported on Talk forum.

Issue

We’re experiencing that the default height (both attribute and inline style) of the Talk <iframe> is much too large and means a large amount of dead whitespace below the Talk module. As suggested in the forum thread, we can set a height on #talk-embed-stream-container via CSS and the <iframe> will adjust to somewhat match that height. But this set height will obviously be wrong as soon as the number of comments present changes.

Could you provide some insight into how Talk sets the height on the <iframe> and also how it adjusts to the number of comments present?

How to reproduce

Would appear to be an issue with every installation of Talk as it's the default behaviour?

Version and environment

• Talk v4.5.0

Notes

Loaded <iframe> markup:

<iframe src="" scrolling="no" marginheight="0" id="coral_talk_stream_iframe" name="coral_talk_stream_iframe" style="width: 1px; min-width: 100%; height: 971px;" width="100%" height="971px" frameborder="0"></iframe>

[kgardnr]

Hey @colourgarden you can set the iframe to be a lesser height and it will automatically increase the height when more comments appear.

Test this out and let us know if it helps!

[colourgarden]

@kgardnr Hi Kim. There's an inline height being set on the <iframe> so any height set in my stylesheet is automatically overwritten on load. Could you provide some insight into how the <iframe> height is calculated (and adjusted)? Thanks.

[jmoreno]

Hi. I´m not sure if this is the best way to fix this issue but it´s working well for me.

I´ve removed the min-height for the tabContainer. It had a 600px value. I´m considering remove padding-bottom also, but I still have it in my site.

client/coral-embed-stream/src/tabs/stream/components/Stream.css

.tabContainer {
  position: relative;
  margin-top: 28px;
  padding-bottom: 50px;
}

Also, I´ve change a value of padding element for body in the default.css.

client/coral-embed-stream/style/default.css

body {
  font-family: Helvetica, 'Helvetica Neue', Verdana, sans-serif;
  width: 100%;
  font-size: 14px;
  margin: 0px;
  padding: 0px 0px 0px 0px;
  height: auto !important;
}

Maybe, this values was usefull in some circumstances but what I´ve tested at the moment in my site works well.

[wyattjoh]

We use pym.js to facilitate auto height management of the iFrame, hence why it's possibly not calculating it correctly. I'll take a look to see what we can do to resolve that.

[colourgarden]

@jmoreno Thanks for your suggestions - I was able to adjust the values you mentioned and achieve a good result 👍

@wyattjoh As pointed out, min-height: 600px is being set on .talk-stream-tab-container (via sister class . Stream__tabContainer___2trkn). When there are no or very few comments loaded, this minimum height is far too big.

This selector and value was added in a pretty unclear commit named Remove some global css, fix some styling issues by @cvle. Maybe they can provide some insight?

[wyattjoh]

Can you try out the #1959 PR to see if that addresses the issue @colourgarden?

[j-norwood-young]

I was still struggling with this issue despite it being marked as "closed". I fixed it with the following CSS:

.Stream__tabContainer___2trkn {
    min-height: auto;
    padding-bottom: 10px;
}

[skolhustick]

@j-norwood-young Your solution somehow did not work for me.

My solution was these :

// Stream.css ( Change padding-bottom 50px to 0px )

.tabContainer { position: relative; margin-top: 28px; padding-bottom: 0px; }

// default.css ( Change 'padding 0px 0px 100px 0px' to 'padding 0px 0px 0px 0px' )

body { font-family: Helvetica, 'Helvetica Neue', Verdana, sans-serif; width: 100%; font-size: 16px; margin: 0px; padding: 0px 0px 0px 0px; height: auto !important; line-height: 1.5em; }

Stream__tabContainer___2trkn seems to get the style from .tabContainer