posit-dev / posit-dev/py-shiny

Plotly widget sizing issue within rows

Open
#620 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Python
Stars
1.8k
Forks
135
Avg merge
2d 18h
Merged PRs (30d)
21

Description

I am experiencing an issue with the sizing of Plotly widgets when placed within rows in Shiny for Python. Currently, when I create a row using ui.row() and include a Plotly widget, the widget automatically adjusts its size to fit the default row height. However, this default height is too small for the Plotly widget, resulting in a suboptimal display.

Steps to reproduce:
Create a new Shiny for Python application.
Add the following code snippet to your application:

ui.row(
  ui.column(
    12,
    ui.div(
      {"class": "app-col"},
      output_widget("plot_widget"),
    ),
  ),
)

Replace output_widget("plot_widget") with the appropriate code for your Plotly widget.
Run the application and observe the size of the Plotly widget within the row.
Expected behavior:
The Plotly widget should adjust its size to fit the available space within the row, ensuring optimal display and readability.

Actual behavior:
The Plotly widget automatically sizes itself to the default row height, which is too small, resulting in a cramped and difficult-to-read visualization.

Additional information:
I have tested this issue on multiple browsers, and the behavior is consistent.

Environment:
Python version: 3.8.13
ipydatagrid version: 1.1.16
ipywidgets version: 8.0.6
Other relevant libraries and their versions: pandas=2.0.2
Browser: Safari and Microsoft Edge

Thank you!

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 reproducing the issue in a new Shiny for Python application using ui.row(), ui.column(), ui.div(), and output_widget("plot_widget"). Inspect how the row and Plotly widget determine their height; done means the widget fits the available row space and remains readable across browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
plotly, python
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.