dygraph htmlwidget show unexpected scrollbar

[lluisfortes1]

Rendering a dygraph htmlwidget on quarto document, shows an unexpected scrollbar on right side (and sometimes on bottom part too). It causes impossible to hover over last data point. It happens on RStudio's Viewer Pane or with web-browsers like Firefox, Chrome or MS-Edge. Not allways with other web-browsers like Falkon or Konqueror. You can see this issue on quarto-htmlwidget page or rendering a new document. I've tried with different figure widths and heights and cannot fix it. The scrollbar does not appear rendering over a Rmarkdown document

• Version Quarto-cli on OS: 1.2.269
• Version R Quarto package: 1.2
• Version RStudio: 2022.07.2.576

library(dygraphs)
dygraph(ldeaths, "All Deaths")

[cderv]

I believe we have this behavior because we have this rule

https://github.com/quarto-dev/quarto-cli/blob/fdfdd315475c4204c790be2ebe105ab4cfa15a34/src/resources/formats/html/_quarto-rules.scss#L330-L335

This will add the scrolling to the box containing the dygraph

<div class="cell-output-display column-body-outset">
    <div class="dygraphs html-widget html-fill-item-overflow-hidden html-fill-item html-widget-static-bound" id="htmlwidget-784a88eaa1e51df01c74" style="width:100%;height:464px;">
    ....
    </div>
    <script (...)> (...) </script>
</div>

Maybe we can find a way to improve this.... 🤔

[cscheid]

I can no longer reproduce this on main and Chrome on OS X or VS Code preview:

[lluisfortes1]

Good to know. It still appears using GNU/Linux and Firefox (v110.0.1) and Chrome (v111.0.5563.64). On example template and the bottom dygraph on htmlwidgets page. Related to htmlwidgets page, it occurs when hovering (on Firefox) and allways present on Chrome. When zoom-out the page, is fixed on Chrome but not on Firefox. This behaviour is does not occurs on quarto template. I think it's something about height/width management as @cderv commented

[mcanouil]

I am going to flag this as "stale" for now, since it does not seem reproducible as of right now.

---

Thank you for using Quarto and reporting an issue!

Unfortunately, this issue is now considered stale because it has been opened since 14 days without providing a "working" reproducible example to help us investigate. If you are still facing the issue, please review the "Bug Reports" guide on how to provide a fully reproducible example as a self-contained Quarto document or a link to a Git repository. Without a reproducible example, it is unlikely that the issue will be addressed and thus will be closed.

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.

Remove stale / needs-repro labels or this will be closed in 14 days.

[lluisfortes1]

Here is a reproducible example. As told, it happens on quarto-htmlwidget page too. Where on Firefox, Chrome and Vivaldi web browsers, scaling down the webpage below 100% zoom, problem is fixed. Not on other web browsers like Falkon.

---
title: "Test"
format: html
---

This is a reproducible example

```{r}
library(dygraphs)
dygraph(ldeaths)

The end.

[mcanouil]

@archymedes Thanks for the update, I am removing "needs-repro" and "stale".

[cscheid]

Sorry, I still can't repro this, in at least two different browsers.

On the latest main, on macOS and Chrome:

macOS + Firefox:

[cscheid]

I'm going to go ahead and close this one. Please feel free to reopen if you have further information that might help us track it.

[cderv]

@cscheid it could be a Windows OS issue as I can reproduce

Probably same OS difference than in

• https://github.com/quarto-dev/quarto-cli/issues/7056#issuecomment-1761161706

[cderv]

Not the same fix though as we have

overflow-x: auto;

Not sure how to tweak the rules. Seems like a sizing issue for html widgets... 🤔