Weird behavior of the topic-progress with a </body> customisation

Product Support

AI-generated summary

The topic-progress feature on a forum is experiencing issues due to a </body> customization with ads. The problem is that the topic-progress is being pushed up by the height of added elements, causing misalignment on mobile and reduced windows. Steven found that using the Footer section instead resolves the issue, but it doesn’t support scripts. The root cause is likely a <body> issue rather than a topic-progress issue.

A temporary fix is to add the following CSS to override the style="bottom: XXpx;" in the #topic-progress-wrapper.docked div:

#topic-progress-wrapper.docked {
    bottom: 60px !important;
}

However, as of Steven’s latest update, the issue has been fixed, although the exact solution is not specified.

1

Since the arrival of the new gutter, the topic-progress has been a bit broken on my forum. It doesn’t align well, on a reduced window or on mobile. It’s always like that on the last post (and only the last post) :

topic-progress.jpg956×557 230 KB

After an intense 5 minutes investigation I found the source : I’ve added some ads on the </body> part of the Customize section and it messes with the topic progress :

<div align="center"><script type="text/javascript" src="http://tags.clickintext.net/**hidden**" title="Classic (IAB)"></script> <script type="text/javascript" src="http://tags.clickintext.net/**hidden**" title="Classic (IAB)"></script><br />
<a href="https://twitter.com/iunctisFR" class="twitter-follow-button" data-show-count="true" data-size="medium">Suivre @iunctisFR</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><br />
<span style="color:#9a9a9a; font-size:9px; line-height:10px;">Régie publicitaire : ClickInText - <a href="http://iunctis.fr/about" title="À propos">À propos</a> - Ce site participe au Programme Partenaire amazon.fr</span><br />
</div>

The code is pretty simple and works well. I also notived that the topic progress seems to be impacted by the height of every element. If I add a 60 pixels ads + 12 pixels text line, the topic progress was “pushed up” by 72 pixels.

When I use the Footer part of the customisation, the topic progress is no longer broken. But I can’t use scripts there.

Also, when I add some things on the footer or </body> section, the content seems kinda out of the forum, before this week, I think it was inside the box. If you know what I mean :

I’m not 100% sure about that part, but it makes me think it might not be related to the topic-progress per se, but more a <body> issue

2

Little update.

I found a way to make it work, kinda.

The problem is the topic-progress when it’s docked. There is a style="bottom: XXpx;" in the div. And this is affected by the height of the elements you put on the </body> customization. So when I add some banners, it will go a bit too high, and not under the Reply button.

Anyway. If anyone has the same issue, I added this css :

#topic-progress-wrapper.docked {
    bottom: 60px !important;
}

The !important override the `style=“bottom: XXpx;” and it works for me.

4

It’s been almost 3 years already!

It’s fixed by the way