RevealJS' slides not scrollable on centered slides

[UdeRecife]

What Happened?

I'm trying to make the content of a RevealJS slide scrollable. As such, I've added the option scrollable: true to my qmd's YAML.

However, after rendering it, even though the content overflows the slide, the slide is not scrollable.

Expected Behavior

Once the option scrollable: is set to true, the overflowing slides should become scrollable.

Screenshots

• Normal slide:

  • 

• Overflowing slide:

  • 

• Option in file's YAML:

  • 

Platform

• OS: Linux;
• Quarto version: 1.3.450

[mcanouil]

Thanks for the report!

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)

The end.

[UdeRecife]

Thanks for the report!

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or a Git repository? Thanks.

Thanks for your reply! My file is really simple. Just text, some unordered list of items. So my guess is that anything will do.

I was aiming at having that for my references' slide, but it's nice to know I can activate that at any time for any slide.

This issue has been brought before in this Stack Overflow thread: https://stackoverflow.com/questions/76962902/quarto-revealjs-presentation-does-not-scroll-down-in-browser

The users there are also noticing this bug. Even the proposed solution, i.e., to set slide-level: 1 only works at times. But this should work at any slide level, regardless of content.

I'm attaching my _quarto.yml and an example file, as requested.

example.zip

[mcanouil]

Thank you, May I ask you share those as plain text directly within your post as shown by me? The reason: it's easier to read code when it is accessible and it helps detects typos quickly. And when i say "accessible" I mean in very general way, i.e., screen readers cannot read zip file, but they can read code blocks. Meaning, attaching documents forbid users with disability to "see" the code.

FYI, some related issues:

• 5339

• 2743

[cderv]

This issue has been brought before in this Stack Overflow thread: stackoverflow.com/questions/76962902/quarto-revealjs-presentation-does-not-scroll-down-in-browser

Thanks for sharing - I gave an answer there https://stackoverflow.com/a/77530991/3436535

scrollable only work on content slides, not section slides. In all our example on the websites, this is used with ## that creates slides. Using # creates sections slides, which are centered by default and no scrollable apply on those.

The rationale is that you shouldn't need to add scrolling on slides used to split sections, and that are meant to contain titles and subtitles mainly. This is an opiniated choice I believe.

[UdeRecife]

This issue has been brought before in this Stack Overflow thread: stackoverflow.com/questions/76962902/quarto-revealjs-presentation-does-not-scroll-down-in-browser

Thanks for sharing - I gave an answer there https://stackoverflow.com/a/77530991/3436535

scrollable only work on content slides, not section slides. In all our example on the websites, this is used with ## that creates slides. Using # creates sections slides, which are centered by default and no scrollable apply on those.

The rationale is that you shouldn't need to add scrolling on slides used to split sections, and that are meant to contain titles and subtitles mainly. This is an opiniated choice I believe.

Oh, I see. Thanks for detailing it. I can see what you're aiming at, and it makes sense also. Not exactly my expectation, but now that I know it, I get it.

Since there's a workaround, and I'm aware of it, it's all good then. I'm really not that opinionated about this, since I'm new to Quarto and all its inner workings. If this is not a bug, perhaps Quarto's future instructions may go a bit more about it where's appropriate.

For those simply looking for a trick to make any slide's content scrollable, you just need to add to that slide's title:

• {.scroll-container style="overflow-y: scroll; height: 500px;"}, changing the height: x to whatever x px you need.
  • Bonus: it works on automated references.

[UdeRecife]

Thank you, May I ask you share those as plain text directly within your post as shown by me? The reason: it's easier to read code when it is accessible and it helps detects typos quickly. And when i say "accessible" I mean in very general way, i.e., screen readers cannot read zip file, but they can read code blocks. Meaning, attaching documents forbid users with disability to "see" the code.

FYI, some related issues:

* [Reveal JS code annotation broken when `scrollable: true` #5339](https://github.com/quarto-dev/quarto-cli/issues/5339)

* [`revealjs`: Cannot advance slides past second slide on mobile with `scrollable: true` in yaml header #2743](https://github.com/quarto-dev/quarto-cli/issues/2743)

For sure. Let me do that now. Here's example.qmd's content:

---
format:
  revealjs:
    ########## Title & Author
    title: Example
    subtitle: Example<br>(year)<br><br><sub><sup>Some more text (0.1.0)
    #author:
    #date: 2023-11-22
    #institute:
    #order:
    ########## Metadata
    keywords: Example
    pagetitle: Example (Year)
    author-meta: Authors
    date-meta: 2023-11-22
    license: "CC BY-NC-SA"
    copyright:
      holder: U de Recife
      year: 2023
########## Referências
    #bibliography: refs_(2023).bib
---

# This should be scrollable (but isn't)

A very long list of items

- item 1
- item 2
- item 3
- item 4
  - item 4.1
  - item 4.2
  - item 4.3
  - item 4.4
- item 5
- item 6
- item 7
- item 8
- item 9
  - item 9.1
  - item 9.2
- item 10
- item 11
- item 12
  - item 12.1
    - item 12.1.1
    - item 12.1.2
  - item 12.2
    - item 12.2.1
    - item 12.2.2
- item 13

# Author's info

<br><br><br><br>

::: r-stack
[**Thanks!**]{style="font-size: 1.14em; text-align: center"}
:::

<br><br>

::: r-stack
Suggestions?
:::

::: r-stack
[[**U.de.Recife\@telegmail.com**](mailto:U.de.Recife@telegmail.com)]{style="font-size: 1.4em; background-color: yellow; color: Blue; font-family: 'Rec Mono Linear'"}
:::

<br><br><br><br><br><br><br><br><br>

::: footer
![[(cc) 2023<br> This work is licensed under<br> [Attribution-NonCommercial-ShareAlike 4.0 International.<br><br>](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.pt-br)]{style="font-size: 0.8em; font-family: 'Rec Mono Linear'; text-align: right"}](../assets/cc_by-nc-sa.png){width="10%" fig-align="center" fig-alt="(CC BY-NC-SA 4.0)"}
:::

And here's my _quarto.yml:

project:
  type: default
  output-dir: .

toc: true
#number-sections: true
#bibliography: references.bib
cite-method: citeproc
csl: "abnt-padrao.csl"

revealjs-plugins:
  - verticator
  - attribution
  - pointer

verticator:
  themetag: ''
  color: '#b3a7c6'
  inversecolor: ''
  skipuncounted: false
  clickable: true
  position: 'auto'
  offset: '3vmin'
  autogenerate: true
  tooltip: 'auto'
  scale: 1

title-block-banner: true

format:
  revealjs:
    ########## Format Options
    #title-block-banner: true
    theme: [beige, custom.scss]
                  # beige/blood/dark/default
                  # league/moon/night/serif
                  # simple/sky/solarized
    css: titles.css
    email-obfuscation: none
    #logo: logo.png
    #footer: "(CC 2023 BY-NC-SA 4.0)"
    #footer: Content under {{< fa brands creative-commons >}}
    ########## Table of Contents
    toc: true
    toc-depth: 6
    toc-title: Sumário
    ########## Numbering
    #number-sections: true
    #number-depth: 6
    ########## Slides
    incremental: false
    slide-level: 3
    slide-number: c/t
    show-slide-number: all
    title-slide-style: default
    center-title-slide: true
    show-notes: false
    ########## Slide Content
    scrollable: true
    smaller: false
    ########## Slide Tools
    overview: true
    menu: true
    chalkboard: true
    multiplex: false
    ########## Transitions
    transition: fade
    transition-speed: slow
    #background-transition: fade
    #fragments: true
    ########## Navigation
    progress: true
    history: false
    navigation-mode: linear
    keyboard: true
    mouse-wheel: false
    hide-inactive-cursor: true
    hide-cursor-time: 200
    loop: true
    controls: auto
    controls-layout: bottom-right
    help: true
    slide-tone: false
    ########## Media
    preview-links: true
    ########## Slide Layout
    #auto-stretch: true
    width: 1600
    height: 1040
    margin: 0.06
    center: true
    disable-layout: false
    ########## References
    ## o csl só funciona com o cite-method: citeproc ou sem cite-method.
    #cite-method: biblatex
    citations-hover: true
    ########## Footnotes
    footnotes-hover: true
    reference-location: document
    ########## Language
    lang: pt_BR
    language:
      section-title-footnotes: "Notas"
      section-title-copyright: "Copyleft"
  odt:
    #reference-doc: "custom-reference-doc.odt"
    #output-file: export.odt
    toc: false
    lang: pt_BR
    language:
      section-title-footnotes: "Notas"
      section-title-copyright: "Copyleft"
  html:
    #css: styles.css
    html-math-method: katex
  pdf:
    pdf-engine: pdflatex
    # pdflatex/lualatex/xelatex/tectonic/latexmk
    latex-auto-install: true
    documentclass: article
    toc: false
    toc-depth: 4
    margin-left: 30mm
    margin-right: 30mm
    ########## PDF Options
    link-citations: true
    colorlinks: false
    keep-tex: true
    header-includes:
    #- \DeclareUnicodeCharacter{1F12F}{\textendash}
    - \usepackage{ragged2e}
    - \usepackage{enumitem}
    - \setlistdepth{10}
    - \setlist[itemize,1]{label=$\bullet$}
    - \setlist[itemize,2]{label=$\bullet$}
    - \setlist[itemize,3]{label=$\bullet$}
    - \setlist[itemize,4]{label=$\bullet$}
    - \setlist[itemize,5]{label=$\bullet$}
    - \setlist[itemize,6]{label=$\bullet$}
    - \setlist[itemize,7]{label=$\bullet$}
    - \setlist[itemize,8]{label=$\bullet$}
    - \setlist[itemize,9]{label=$\bullet$}
    - \setlist[itemize,10]{label=$\bullet$}
    - \renewlist{itemize}{itemize}{10}
  beamer:
    header-includes:
    - \usepackage{enumitem}
    - \setlistdepth{10}
    - \setlist[itemize,1]{label=$\bullet$}
    - \setlist[itemize,2]{label=$\bullet$}
    - \setlist[itemize,3]{label=$\bullet$}
    - \setlist[itemize,4]{label=$\bullet$}
    - \setlist[itemize,5]{label=$\bullet$}
    - \setlist[itemize,6]{label=$\bullet$}
    - \setlist[itemize,7]{label=$\bullet$}
    - \setlist[itemize,8]{label=$\bullet$}
    - \setlist[itemize,9]{label=$\bullet$}
    - \setlist[itemize,10]{label=$\bullet$}
    - \renewlist{itemize}{itemize}{10}