Quarto revealjs presentation does not scroll down in browser

253 views Asked by At

I am trying to prepare lecture slides with quarto in revealjs format (previously used xaringan with great results).

When I open the rendered html with any browser (Firebox, Chrome, Edge), I cannot scroll down to the content that is at the bottom. I have tried scrollable: true and in YAML and {.scrollable} next to slide headings; they don't work. The example below has an R code that produces a regression table but even if the slide consists only of text, it will not scroll down.

This makes quarto unusable for my lectures, but I wish to switch to quarto for everything as soon as I can, so any help is appreciate.

YAML:

title: "Regression"
author: "Me"
format:
  revealjs: 
    theme: dark
    incremental: true
    scrollable: true
    transition: slide
execute:
  echo: true
editor: visual

Example Slide:

# Preparation

- `jtools` is just a quick way to produce regression analyses and plots
- dataset is from base R
- We have a significant interaction

. . . 

```{r}
library(jtools) # for summ()
states <- as.data.frame(state.x77)
fiti <- lm(Income ~ Illiteracy * Murder + `HS Grad`, data = states)
summ(fiti)
2

There are 2 answers

0
agdamsbo On

I have the exact same issue. I tried a couple of things including installing the pre-release version of quarto, trying out extensions and adjusting different flags. What ended up restoring the scrolling was setting my

format:
  revealjs:
    slide-level: 1

but that is not really any good as I will just have these enormously long slide. I don't think this is the intended functionality. You should probably file a bug report on (GitHub)[https://github.com/quarto-dev/quarto/issues]

0
cderv On

As explained in Quarto doc (https://quarto.org/docs/presentations/revealjs/#creating-slides)

Default setting to create slides are:

  • # for sections slides
  • ## for normal slides

Sections slides are meant to be a title and a subtitle, and are by default centered.

Normal slides are for content, and not centered by default.

scrollable: true will apply overflow on non-center slides only

  .reveal .slide:not(.center) {
    height: 100%;
    overflow-y: auto;
  }

For scrollable to work, height: 100% is required, which is not set for slide with .center class. And it does not seem good practice to allow scroll on section slides that are centered.

So you need to put your content in the normal slide not a section slide

---
title: "Regression"
author: "Me"
format:
  revealjs: 
    theme: dark
    incremental: true
    scrollable: true
    transition: slide
execute:
  echo: true
editor: visual
---

## Preparation

- `jtools` is just a quick way to produce regression analyses and plots
- dataset is from base R
- We have a significant interaction

. . . 


```{r}
library(jtools) # for summ()
states <- as.data.frame(state.x77)
fiti <- lm(Income ~ Illiteracy * Murder + `HS Grad`, data = states)
summ(fiti)
```

In @agdamsbo answer (https://stackoverflow.com/a/77129464/3436535), setting slide-level: 1 makes it works, because normal slides are now # and no more section slide possible.

Hope it helps clarifies.

If this behavior does not seem like a good one, please do open a discussion on Quarto repo so that we can discuss as feature request an evolution of this.