reveal.js: regression: controls disappear; don't account for header

I have an HTML document with a header, with a menu in the header:

<body>
  <header>...</header>
  <main class="reveal">
    <div class="slides">
    ...
    </div>
  </main>
</body>

On an old version of reveal.js, this worked just fine, and the controls appeared. You can see it here:

https://confound.io/present/intro

I’m developing a new site with an almost identical layout. I downloaded the latest reveal.js v3.8.0. Unfortunately, unless I’m mistaken, it seems to be calculating the size of the presentation without taking into consideration the height of the menu in the header. The controls disappear below the screen!

As you can see from the link above, this was working fine in earlier versions. I have confirmed that reverting to a reveal.js from 2017 fixes the problem. I’ll have to revert to the 2017 version, but unfortunately that means that I’ll have to add back my linear navigation workaround for #1904.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 30 (3 by maintainers)

Most upvoted comments

Try setting the embedded config option to true. That will make reveal.js use the the .reveal element as its viewport.

More info: https://revealjs.com/presentation-size/#embedded

hakimel on Oct 13, 2022