When the [`fig-column`, `column`](https://quarto.org/docs/reference/cells/cells-knitr.html#page-columns) or [`classes`](https://quarto.org/docs/reference/cells/cells-knitr.html#attributes) chunk option is set to one of Quarto's [predefined article layout classes](https://quarto.org/docs/authoring/article-layout.html#available-columns), it does not get applied to htmlwidgets (or their surrounding HTML divs respectively).

Consider the following reproducible example:

- Source file: [`test.qmd`](https://salim-b.gitlab.io/adhoc/test.qmd)
- Render command: `quarto render test.qmd --to=html -M keep-md:true`
- Intermediate Markdown file: [`test.md`](https://salim-b.gitlab.io/adhoc/test.md)
- Final HTML file: [`test.html`](https://salim-b.gitlab.io/adhoc/test.html)

OTOH, wrapping the code chunk that contains the htmlwidget in a Pandoc div with the desired layout class works fine (as long as you set `echo: false` since the input code `<pre>` element would also get the full screen width):

````rmd
::: {.column-screen}

```{r}
#| label: fig-widget
#| fig-cap: "An htmlwidget figure"
#| out-width: 100%
#| echo: false

plotly::plot_ly(data = cars,
                type = "scatter",
                mode = "markers",
                x = ~speed,
                y = ~dist)
```

:::
````

---

The resulting HTML div structure with the chunk option `fig-column: screen` set is...

```html
  <div class="cell fig-column-screen">
    ...
    <div id="fig-widget" class="quarto-figure quarto-figure-center anchored">
      <figure class="figure">
        <div id="htmlwidget-..." style="width:100%;height:480px;" class="plotly html-widget"></div>
        <script type="application/json" data-for="htmlwidget-...">...</script>
        <p></p>
        <figcaption aria-hidden="true" class="figure-caption">Figure 2: An htmlwidget figure</figcaption>
        <p></p>
      </figure>
    </div>
  </div>
```

(for chunk option `column: screen`, the first line above shrinks to `<div class="cell">`)

...whereas correct would be:

```html
  <div class="cell page-columns page-full"> <!--  CHANGED  -->
    ...
    <div class="cell-output-display column-screen">  <!--  ADDED  -->
      <div id="fig-widget" class="quarto-figure quarto-figure-center anchored">
        <figure class="figure">
          <div id="htmlwidget-..." style="width:100%;height:480px;" class="plotly html-widget"></div>
          <script type="application/json" data-for="htmlwidget-...">...</script>
          <p></p>
          <figcaption aria-hidden="true" class="figure-caption">Figure 2: An htmlwidget figure</figcaption>
          <p></p>
        </figure>
      </div>
    </div>  <!--  ADDED  -->
  </div>
```

With the workaround, the resulting structure is in contrast:

```html
<div class="column-screen">
  <div class="cell">
    ...
    <div id="fig-widget" class="quarto-figure quarto-figure-center anchored">
      <figure class="figure">
        <div id="htmlwidget-e5ae17d1cb7fb9ba5e0f" style="width:100%;height:480px;" class="plotly html-widget"></div>
        <script type="application/json" data-for="htmlwidget-e5ae17d1cb7fb9ba5e0f">...</script>
        <p></p>
        <figcaption aria-hidden="true" class="figure-caption">Figure 2: An htmlwidget figure</figcaption>
        <p></p>
      </figure>
    </div>
  </div>
</div>
```

dragonstyle
2022-05-25T17:07:08Z
salim-b
closed
`fig-column`, `column` or `classes` chunk options have no effect for htmlwidgets
https://github.com/quarto-dev/quarto-cli/issues/981