Plotly renders incorrectly when sidebar is included

[matthh10]

I have:

• searched the issue tracker for similar issues
• installed the latest version of Quarto CLI
• formatted my issue following the Bug Reports guide

Bug description

When trying to include an interactive plotly in a Quarto dashboard with R shiny, the plot will not render correctly and will jump outside the card when either a sidebar or other cards are included. Do you know of any work around, as I would like to include a sidebar in my dashboard (please see the reproducible example below)

I see a similar issue was raised in plotly plots don't work with shiny ui inputs for Quarto dashboards #8608, but I see no fix for R users.

Steps to reproduce

---
title: "plotly_bug"
format: dashboard
server: shiny
---

```{r}
#| context: setup
#| include: false

library(shiny)
library(bslib)
library(plotly)
library(palmerpenguins)
library(dplyr)
```

# {.sidebar}

```{r}
sliderInput(
    "slider",
    label = "Number of bins",
    min = 10,
    max = 60,
    value = 20
  )
```


# Plot

## Row

### Card
```{r}
plotlyOutput(outputId = "plot") 
```


```{r}
#| context: server

output$plot <- renderPlotly({ 
    p <- 
      penguins |> 
      filter(!is.na(body_mass_g)) |> 
      ggplot(aes(body_mass_g)) + 
      geom_histogram(bins = input$slider) 

    ggplotly(p) 
  }) 

```

Outputs:

Loading required namespace: shiny


processing file: plotly_bug.qmd
                                                                                                            
output file: plotly_bug.knit.md

pandoc 
  to: html
  output-file: plotly_bug.html
  template: /opt/quarto/1.8.25/share/formats/dashboard/template.html
  standalone: true
  section-divs: true
  html-math-method: mathjax
  wrap: none
  default-image-extension: png
  variables: {}
  
metadata
  document-css: false
  link-citations: true
  date-format: long
  lang: en
  page-layout: custom
  title: plotly_bug
  server:
    type: shiny
  
Loading required package: shiny

Attaching package: ‘bslib’

The following object is masked from ‘package:utils’:

    page

Loading required package: ggplot2

Attaching package: ‘plotly’

The following object is masked from ‘package:ggplot2’:

    last_plot

The following object is masked from ‘package:stats’:

    filter

The following object is masked from ‘package:graphics’:

    layout


Attaching package: ‘palmerpenguins’

The following objects are masked from ‘package:datasets’:

    penguins, penguins_raw


Attaching package: ‘dplyr’

The following objects are masked from ‘package:stats’:

    filter, lag

The following objects are masked from ‘package:base’:

    intersect, setdiff, setequal, union

Listening on http://localhost:4642/

Actual behavior

Plotly does not render, either flickers or jumps around page

Expected behavior

Interactive plotly renders inside card and reacts based on input

Your environment

RStudio in Posit Workbench 2025.09.1+401.pro2, “Cucumberleaf Sunflower”

Quarto check output

Quarto 1.8.25
[✓] Checking environment information...
      Quarto cache location: /mnt/homes/matthh10/.cache/quarto
[✓] Checking versions of quarto binary dependencies...
      Pandoc version 3.6.3: OK
      Dart Sass version 1.87.0: OK
      Deno version 2.3.1: OK
      Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
      Version: 1.8.25
      Path: /opt/quarto/1.8.25/bin

[✓] Checking tools....................OK
      TinyTeX: (external install)
      Chromium: (not installed)

[✓] Checking LaTeX....................OK
      Using: Installation From Path
      Path: /usr/local/bin
      Version: 2025

[✓] Checking Chrome Headless....................OK
      Using: Chrome found on system
      Path: /usr/bin/google-chrome
      Source: PATH

[✓] Checking basic markdown render....OK

WARN: Specified QUARTO_PYTHON '/opt/python/3.13.0/bin/python' does not exist
WARN: No python binary found in specified QUARTO_PYTHON location '/opt/python/3.13.0/bin/python'
[✓] Checking Python 3 installation....OK
      Version: 3.13.8
      Path: /opt/python/3.13.8/bin/python3
      Jupyter: 5.9.1
      Kernels: python3, py3.12.11, py3.11.13, py3.10.19, py3.12.12, py3.13.8

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
      Version: 4.5.1
      Path: /opt/R/4.5.1/lib/R
      LibPaths:
        - /mnt/homes/matthh10/R/x86_64-pc-linux-gnu-library/4.5
        - /opt/R/4.5.1/lib/R/library
      knitr: 1.50
      rmarkdown: 2.30

[✓] Checking Knitr engine render......OK

[mcanouil]

Could you properly format your post using code blocks for code and terminal outputs? Thanks.
If your code contains code blocks, you need to enclose it using more backticks, i.e., usually four ````.
See https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us.

---

Important

Accessibility: For better accessibility, please ensure link text is descriptive and meaningful rather than using generic terms such as "here". This helps all users understand the link's destination. See Writing meaningful link text (WCAG).

[matthh10]

Could you properly format your post using code blocks for code and terminal outputs? Thanks. If your code contains code blocks, you need to enclose it using more backticks, i.e., usually four ````. See https://quarto.org/bug-reports.html#formatting-make-githubs-markdown-work-for-us.

Important

Accessibility: For better accessibility, please ensure link text is descriptive and meaningful rather than using generic terms such as "here". This helps all users understand the link's destination. See Writing meaningful link text (WCAG).

Apologies should be formatted correctly with outputs. No errors are raised, so I included screenshots of the dysfunctional plotly.

[mcanouil]

Thanks, could you add alternative text to your screenshots? "Image" is not great.
And update your "here" link, please.

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

Important

Accessibility: For better accessibility, please ensure link text is descriptive and meaningful rather than using generic terms such as "here". This helps all users understand the link's destination. See Writing meaningful link text (WCAG).

[matthh10]

Thanks, could you add alternative text to your screenshots? "Image" is not great. And update your "here" link, please.

Important

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

Important

Accessibility: For better accessibility, please ensure link text is descriptive and meaningful rather than using generic terms such as "here". This helps all users understand the link's destination. See Writing meaningful link text (WCAG).

Alt text added and link has been updated.

[mcanouil]

To clarify:

• palmerpenguins (native to R in 4.5) and bslib (not used at all in your code) R packages are not needed, at least explicitly to reproduce.
• You stated the issue is with sidebar, but the exact same thing seems to happen without. So what have you checked exactly?

To be the issue, is an ID issue: your page is called "plot" which leads to "plot" as ID, but your plot also has "plot" as ID. IDs should be unique and I believe you are confusing the tools here.
Change your page header, add an ID explicitly: # Plot {#plot-tab}.

I'm not sure there is a way for Quarto or Shiny to check uniqueness of IDs when embedding elements.
FWIW, I believe the issue is not limited to plotly, but to anything dynamic which would make the issue obvious such as automatic figure resizing.

[matthh10]

Apologies, I had been able to render the dashboard previously without the sidebar so had thought that was the issue, but I can now see that it's not. Thank you for your advice on defining the page ID explicitly, that has worked now. Would you like me to update the issue in naming page header "plot" without including an ID? If not, I am happy to close the issue.

[mcanouil]

Would you like me to update the issue

Yes, this would be great, but the issue is about conflicting IDs between shiny components and dashboards components. Not about missing IDs, nor about "plot" itself.

Same issues with "whatever", because an ID is automatically created for # Whatever and that is the same as used by Shiny.

---
title: "plotly_bug"
format: dashboard
server: shiny
---

```{r}
#| context: setup
#| include: false

library(shiny)
library(plotly)
library(dplyr)
```


```{r}
sliderInput(
  "slider",
  label = "Number of bins",
  min = 10,
  max = 60,
  value = 20
)
```

# Whatever

```{r}
plotlyOutput(outputId = "whatever")
```

```{r}
#| context: server

output$whatever <- renderPlotly({
  p <- ggplot(filter(penguins, !is.na(body_mass))) +
    aes(x = body_mass) +
    geom_histogram(bins = input$slider)

  ggplotly(p)
})

```