# Resizing shiny-plotly output height and width automatically based on window

**URL:** <https://community.plotly.com/t/resizing-shiny-plotly-output-height-and-width-automatically-based-on-window/4444>\
**Category:** Plotly R\
**Created:** [June 7, 2017, 1:52pm UTC](https://community.plotly.com/t/resizing-shiny-plotly-output-height-and-width-automatically-based-on-window/4444 "2017-06-07T13:52:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![shinyApp](https://avatars.discourse-cdn.com/v4/letter/s/2acd7d/32.png) [@shinyApp](https://community.plotly.com/u/shinyApp)\
**Post date:** [June 7, 2017, 1:52pm UTC](https://community.plotly.com/t/resizing-shiny-plotly-output-height-and-width-automatically-based-on-window/4444/1 "2017-06-07T13:52:30Z")

</div>

I would like to have the shiny-plotly output height and width adjusted to the current window size. I have tried to use the below but of no use.

> ShinyUi ← fluidPage(

> # Application title
> 
> titlePanel(“title”),

> sidebarLayout(  
> sidebarPanel(  
> … inputs …  
> ),

> ```
> mainPanel(
> plotlyOutput("distPlot", height = 'auto', width = 'auto')
> )
> 
> ```
> 
> ))

> ShinyServer ← function(input, output, session) {

> output$distPlot ← renderPlotly({

> ```
> p <- ggplot(dataShow, aes(x=dataShow$X, y=dataShow$Y)) + 
> 
> ```
> 
> geom\_point(shape=1, alpha = 0.5, color = “grey50”)

> ```
> ggplotly(p)
> 
> ```

> })

> }

> shinyApp(ui = ShinyUi, server = ShinyServer)

Would you know of any other options to use maybe in server function instead of the above UI function usage?

---

<div class="post-metadata">

**Author:** ![joeflack4](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/joeflack4/32/14803_2.png) [@joeflack4](https://community.plotly.com/u/joeflack4)\
**Post date:** [April 13, 2021, 12:07am UTC](https://community.plotly.com/t/resizing-shiny-plotly-output-height-and-width-automatically-based-on-window/4444/2 "2021-04-13T00:07:47Z")

</div>

Hello~. This is the best I found on the topic, and probably close to the best available. I might mess with the javascript a little, and your Shiny code setup is probably different than in this post. Mine was too, but I got it to work for me: [r - dynamically adjust height and/or width of shiny-plotly output based on window size - Stack Overflow](https://stackoverflow.com/questions/44324783/dynamically-adjust-height-and-or-width-of-shiny-plotly-output-based-on-window-si)

---

<div class="post-metadata">

**Author:** ![ismirsehregal](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/ismirsehregal/32/6794_2.png) [@ismirsehregal](https://community.plotly.com/u/ismirsehregal)\
**Post date:** [October 6, 2023, 7:00am UTC](https://community.plotly.com/t/resizing-shiny-plotly-output-height-and-width-automatically-based-on-window/4444/3 "2023-10-06T07:00:37Z")

</div>

I left an answer [here](https://stackoverflow.com/a/77238246/9841389).