Reveal collapses to zero height unless it's in a container set with an absolute height

[deanebarker]

If I do this:

<main>
  <div class="reveal">
    <!-- reveal stuff here -->
  </div>
</main>

The slides do not show, and layout inspector reveals (heh...) that div.reveal has a height of 0px.

If I do this --

<main style="height: 400px;">
  <div class="reveal">
    <!-- reveal stuff here -->
  </div>
</main>

-- it works fine.

[psyko255]

Seeing this as well. Any workarounds?

[Frank-a-Rabbit]

This is expected behavior. The div with class .reveal has height set to 100% but if the parent element does not have a height set it will collapse to 0 height. I have submitted a PR with a fix.

[Martinomagnifico]

This is expected. In a browser where the HTML page is the presentation (standard), the presentation will adjust to the browser window. And because the browser window has a height, the presentation has a height. When a presentation is shown inside another page, it is 'embedded' (set embedded: true in the config). It is up to the author of that outer page to define an area (just give it a width and height there) inside which that presentation is then shown. Reveal will fill that area with the presentation. It does not need the PR.

[Frank-a-Rabbit]

This is expected. In a browser where the HTML page is the presentation (standard), the presentation will adjust to the browser window. And because the browser window has a height, the presentation has a height. When a presentation is shown inside another page, it is 'embedded' (set embedded: true in the config). It is up to the author of that outer page to define an area (just give it a width and height there) inside which that presentation is then shown. Reveal will fill that area with the presentation. It does not need the PR.

@Martinomagnifico I disagree. The PR is one CSS rule that will simplify the need to explicitly set a height elsewhere.