Making plotly graphs fill the container width

[lukefullard]

Hello,
I'm unsure if this is a plotly or quarto thing... (I'll delete if it's a plotly thing, but would appreciate any help).

Currently I have a plot within a tabset in quarto and when I first load the quarto generated html file the plot takes up only a proportion of the tabset width:

Now, if I press "ctrl" "+" to zoom in on the page even once, the plot expands to fill the container!

Is there a way to make the plot fill the container all of the time?
Thank you.

[mcanouil]

I do not have the answer (yet), but it would help if instead of sharing screenshots, it was a small reproducible Quarto document to play around with.

[mcanouil]

You need extra ` (four at least):

---
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
:::

[lukefullard]

Thanks for your reply, but I don't see too much difference between your code and the one I linked to (sorry, when I initially pasted as plain text I had formatting issues).

Either way, running your code gives me the same issue.
Could you please confirm that you do not get the issue I described, that the plots in your tabs are OK?

Thanks!

[mcanouil]

There is no difference (I can't do anything from the GitHub mobile app 😅), it's only to highlight how to format code, i.e., by adding extra `.
I'll try later and/or someone else can now try with the code.

````
---
title: bla
---

Text

```{python}
code
```

````

[lukefullard]

There is no difference (I can't do anything from the GitHub mobile app 😅), it's only to highlight how to format code, i.e., by adding extra `. I'll try later and/or someone else can now try with the code.

---

title: bla

Text

code

```

Ah! Thanks, very handy to know!

[StevenBlackbeard]

Hi, has there been any update/resolution on this? I'm struggling with the same issue when I test the above code... My findings suggest that, Inside a tabset, the very first tab renders/resizes just fine but the resizing issues affects every tab thereafter.