quarto-dev / quarto-dev/quarto

Plotly plots do not correctly fill the container width when placed in tabs

Open
#876 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.