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


#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) :

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.