Columns right after list isn't displayed properly for reveal.js slides

[snhansen]

Description

Consider the following example:

---
format: revealjs
---

## Title

Here's a list

* Item 1
* Item 2

:::: {.columns}

::: {.column width=50%}
Left column
:::

::: {.column width=50%}
Right column
:::

::::

When rendering this as a revealjs slide, the columns aren't created properly:

It works if there's text or a <br> after the list. Is it a bug or is there a workaround? This is on Windows 11 using Quarto v. 1.5.43.

[mcanouil]

Try with:

---
format: revealjs
---

## Title

::: {#top-content}
Here's a list

* Item 1
* Item 2
:::

:::: {.columns}

::: {.column width=50%}
Left column
:::

::: {.column width=50%}
Right column
:::

::::

[mcanouil]

FYI, below is the HTML produced by Pandoc and Quarto.

Pandoc	Quarto
<section id="title" class="slide level2"> <h2>Title</h2> <p>Here’s a list</p> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <div class="columns"> <div class="column" style="width:50%;"> <p>Left column</p> </div> <div class="column" style="width:50%;"> <p>Right column</p> </div> </div> </section>	<section id="title" class="slide level2"> <h2>Title</h2> <p>Here’s a list</p> <ul> <li>Item 1</li> <li>Item 2</li> </ul> <div class="columns"> <div class="column" style="width:50%;"> <p>Left column</p> </div> <div class="column" style="width:50%;"> <p>Right column</p> </div> </div> <div class="quarto-auto-generated-content"> <div class="footer footer-default"> </div> </div> </section>

So it might be a Reveal.js issue.
@cderv What do you think?

[cderv]

I believe this our Quarto CSS here.

quarto-cli/src/resources/formats/html/_quarto-rules.scss

Lines 642 to 655 in 974eba9

	/* restore previous pandoc columns behavior
	(too many reports of slide layout breaking)
	see https://github.com/jgm/pandoc/pull/8237
	*/
	div.columns {
	display: initial;
	gap: initial;
	}
	div.column {
	display: inline-block;
	overflow-x: initial;
	vertical-align: top;
	width: 50%;
	}

The display: initial here could be something causing this. Removing seems to solve as display: flex will be used.

I believe this has been done because Pandoc did this change

• HTML writer: revert to using width property for column widths jgm/pandoc#8237

and it seems there were breakage report which lead JJ to revert to initial.

We would need to find the other example that don't work if we remove this initial value

[mcanouil]

Should we open an issue ("Future")?

[cderv]

yes we probably should to remember

[mcanouil]

• Columns right after list isn't displayed properly for Reveal.js #10073