HTML5 build output CSS-related issue due to 2019 r2 upgrade

[jjorissen]

Hi,
I've just upgraded to Flare 2019 r2.
When building HTML5 output now, the output looks different.
In detail : the scrollbar in the browser (Chrome) now goes over our top navigation (TOC), which wasn't the case before.
As a result, clicking links to bookmarks/headers in any topic, will jump to that location, but the header + top lines of that text are shown underneath the top nav.

Of course, this is not what we want.
When a user clicks on a link, he/she should see the header and all the text.

I've made some screenshots - too big to attach here, so put them on wetransfer :
https://we.tl/t-Xn9C11i7lB
- screens 1a, 1b, 1c show the correct (old) behavior
- screens 2a, 2b, 2c show the incorrect new behaviour with 2019r2.

As you can see, the cause (and solution) is :
- the max-width on the title-bar => should be 1536px instead of 1519.2px
- main-section now contains "min-height: 0;"
while it contained :
"height: calc(100% - 104px) !important;
overflow: auto;"

=> when adapting this, it's correct like before.

Is it the Flare builder that now incorrectly changes this?

[jjorissen]

I've found the solution.
The 'calc' css-part was already in our css file, but apparently the previously used class changed.
It was in 'section.main-section', and now is in '.main-section'

Updating this in our css file, solves the issue.

[NorthEast]

So just to be clear - is the problem with your own CSS, or is there a problem in the CSS generated by Flare?

[jjorissen]

It wasn't an issue before, so for some reason the CSS-class changed due to the Flare update.
So it's related to the update, but I was able to fix it myself by the change in our own CSS file.

[MC Hammer]

We're having similar issues, not amused.
Thanks for this post, it gives me an idea of where to look to fix this.