quarto-dev / quarto-dev/quarto
Plotly plots do not correctly fill the container width when placed in tabs
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 645
- Forks
- 62
- Avg merge
- 17h 42m
- Merged PRs (30d)
- 13
Description
Bug description
Plotly figures included in tabs (e.g. panel-tabset) do not correctly size to their container when placed inside tabbed layouts. They correctly fill for the first tab only, but do not fill the full width in subsequent tabs.
Steps to reproduce
Render the following :
---
title: "Plotly width test"
format:
html:
code-fold: true
self-contained: true
page-layout: full
execute:
echo: false
jupyter: python3
---
::: {.panel-tabset}
## This is the Python Plot
```{python}
import plotly.graph_objects as go
import numpy as np
N = 1000
t = np.linspace(0, 10, 100)
y = np.sin(t)
fig = go.Figure(data=go.Scatter(x=t, y=y, mode='markers'))
fig
```
## This is the same Python Plot but in another tab
```{python}
import plotly.graph_objects as go
import numpy as np
N = 1000
t = np.linspace(0, 10, 100)
y = np.sin(t)
fig = go.Figure(data=go.Scatter(x=t, y=y, mode='markers'))
fig
```
## Just some text
This tab is just for fun
:::
Actual behavior
On initial page load, the plots on the 2nd, 3rd etc. tabs render at an incorrect width (too narrow). Interacting with the browser (e.g. zooming the page) causes the plots to resize correctly, indicating that a resize event is required but not being triggered automatically.
Expected behavior
On initial page load, all plots on all tabs correctly fill their container.
Your environment
OS: MacOS 26.2
Quarto version: 1.8.26
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by rendering the supplied Quarto .qmd with its Python Plotly figures and panel-tabset layout. Trace how the tabbed HTML and Plotly figures handle their initial sizing and resize events; done means every plot fills its container on initial page load, including plots in later tabs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- python, typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100