Is it possible to decrease size of a row in Shiny beyond a certain height

Question

I like to adjust height of rows so that the layout "sidebar panel plus main panel (2 rows X 2 columns)" fills the available area of the browser window, thus it allows visualization of all the figures without scrolling down the page.

Under defaults options, one need to scroll down the page to see the second row completely. To fix this, I used ‘height’ in ‘renderPlot’ [i.e., height=200] and 'style' in ‘column’ [i.e., div(style = "height:100px")]. ‘height’ in renderplot decreased plot size, and row height varied with height values in ‘div(style = "height:100px")’, however approximately @ height:70px row height is fixed; row height did not decrease any further even though number of pixels decreased; hr() plots an horizontal line and it gives an idea how the row height changes for different values of height in style. The problem is that at this lowest value the bottom plot requires scrolling down the page whereas I want ‘sidebar panel plus main panel (with multiple rows)’ to be in the available area of the browser window so that I do not need to scroll down the page. Greatly appreciate your help.

The following links were useful to an extent:

Control the height in fluidRow in R shiny and Scale and size of plot in RStudio shiny

Here is the sample code that generates sidebar panel plus main panel of 2 X 1:

library(shiny)
library(ggplot2)

ui<- pageWithSidebar(
  headerPanel('data:Iris'),
  sidebarPanel(
    selectInput('xcol', 'X Variable', names(iris)),
    selectInput('ycol', 'Y Variable (Plot 1)', names(iris),
                selected=names(iris)[[2]]),
    selectInput('ycol2', 'Y Variable (Plot 2)', names(iris),
                selected=names(iris)[[3]])
  ),
  mainPanel(
    fluidRow(
      column(6,plotOutput('plot1'),div(style = "height:100px"))
    ),
    hr(),
    fluidRow(
      column(6,plotOutput('plot2'))
    )
  )
)

server <- function(input, output) {

  # pass data of selected input variables from the dataframe to ggplot

  # Plot 1
  output$plot1 <- renderPlot({
    ggplot(iris,aes_string(input$xcol,input$ycol))+geom_point()
  },height = 200)

  # Plot 2
  output$plot2 <- renderPlot({
    ggplot(iris,aes_string(input$xcol,input$ycol2))+geom_point()
  },height = 200)
}

shinyApp(ui =ui, server = server)

As it is seen here, plot in the second row requires scrolling down of the web page to see it completely.

score 1 · Accepted Answer · answered May 26 '16 at 16:04

1

It is actually the plotOutput which has a default height of "400px". Change the line to

column(6,plotOutput('plot1', height="200px"))

answered May 26 '16 at 16:04

Xiongbing Jin

11,779
3
47
41

Solved. Similarly, can we control height and width of 'verbatimTextOutput'? Greatly appreciate any leads. – SatishR May 26 '16 at 17:41
`verbatimTextOuput` outputs an HTML `pre`. To control the height and width, you should change the height and width of its parent element (for example if it is inside a `fluidRow`, you can change the height of `fluidRow` `fluidRow(style="height:200px;")` – Xiongbing Jin May 26 '16 at 17:50

Is it possible to decrease size of a row in Shiny beyond a certain height

1 Answers1