Shiny Plot Height behaving different on different desktop

Question

I am trying to make a custom UI in which i have to plot 4 plots inside each tab,
but i am getting scroll on plot rendering and when i add height as 240 scrollbar disappear and it works for the same size desktop but it behaves different on different size of desktop and i get scrollbar again.

motive is to fit the plots in screen without scrollbar, also i would like to get a feedback that am i creating UI in a right way

Thanks

UI

navbarPage("NarBar",
       tabPanel("Tab1",
          column(12,      
              column(4,
                  column(12,     
                     checkboxInput("ID1", "Checkbox1", FALSE)
                     ),
                  column(12,
                     checkboxInput("ID2", "Checkbox2", FALSE)
                  )
                ),
              column(8,
                column(3,
                       selectInput("ID1", "Select1:",
                                       c("A" = "a",
                                         "B" = "b",
                                         "C" = "c"))
                ),
                column(3,
                       selectInput("ID2", "Select2:",
                                   c("A" = "a",
                                     "B" = "b",
                                     "C" = "c"))
                ),
                column(3,
                       selectInput("ID3", "Select3:",
                                   c("A" = "a",
                                     "B" = "b",
                                     "C" = "c"))
                ),
                column(3,
                       selectInput("ID4", "Select4:",
                                   c("A" = "a",
                                     "B" = "b",
                                     "C" = "c")
                                   )
                )
              )
            ),
              column(12,
                     column(4,
                        column(12,    
                           selectInput("ID1", "Select1:",
                                       c("A" = "a",
                                         "B" = "b",
                                         "C" = "c")
                                       )
                           ),
                        column(12,    
                           selectInput("ID2", "Select2:",
                                       c("A" = "a",
                                         "B" = "b",
                                         "C" = "c")
                                       )
                           ),
                        column(12,    
                               selectInput("ID3", "Select3:",
                                           c("A" = "a",
                                             "B" = "b",
                                             "C" = "c")
                               )
                        ),
                        column(12,    
                               selectInput("ID4", "Select4:",
                                           c("A" = "a",
                                             "B" = "b",
                                             "C" = "c")
                               )
                        ),
                        column(12,    
                               selectInput("ID5", "Select5:",
                                           c("A" = "a",
                                             "B" = "b",
                                             "C" = "c")
                               )
                        ),
                        column(12,    
                               selectInput("ID6", "Select6:",
                                           c("A" = "a",
                                             "B" = "b",
                                             "C" = "c")
                               )
                          )
                      ),
                     column(width = 8,
                            tabsetPanel(
                              tabPanel(title = 'Tab1',
                                    column(width = 6,
                                           plotOutput('plot1',height = 240)
                                    ),
                                    column(width = 6,
                                           plotOutput('plot2',height = 240)
                                    ),
                                    column(width = 6,
                                           plotOutput('plot3',height = 240)
                                    ),
                                    column(width = 6,
                                           plotOutput('plot4',height = 240)
                                    )
                              ),
                              tabPanel(title = 'Tab2', 
                                       column(width = 6,
                                              plotOutput('plot5',height = 240)
                                       ),
                                       column(width = 6,
                                              plotOutput('plot6',height = 240)
                                       ),
                                       column(width = 6,
                                              plotOutput('plot7',height = 240)
                                       ),
                                       column(width = 6,
                                              plotOutput('plot8',height = 240)
                                       )
                              ),
                              tabPanel(title = 'Tab3',
                                       column(width = 6,
                                              plotOutput('plot9',height = 240)
                                       ),
                                       column(width = 6,
                                              plotOutput('plot10',height = 240)
                                       ),
                                       column(width = 6,
                                              plotOutput('plot11',height = 240)
                                       ),
                                       column(width = 6,
                                              plotOutput('plot12',height = 240)
                                       )
                                 )
                            )
                     )   
            )              
       ),

       tabPanel("Tab 2"
        ),
       tabPanel("Tab 3"
        ),
       tabPanel("Tab 4"
        )
     )

server just using same plot for every plotOutput

function(input, output, session) {

  output$plot1 <- renderPlot({        #just use the same plot on different plots like plot2,plot3,etc
  cars2 <- cars + rnorm(nrow(cars))
  plot(cars2)
  })

}

score 1 · Answer 1 · answered Oct 19 '19 at 21:14

First, your code has a lot of repetitive parts. We can use lapply to creare these parts more efficiently as follow.

Based on this answer (https://stackoverflow.com/a/26785047/7669809), I added tags$head(tags$style(".shiny-plot-output{height:40vh !important;}")) to your navbarPage. It seems to work. You can change 40vh to other number you would like to use.

library(shiny)
library(htmlwidgets)

ui <- navbarPage("NarBar",
                 tags$head(tags$style(".shiny-plot-output{height:40vh !important;}")),
                 tabPanel("Tab1",
                          column(12,      
                                 column(4,
                                        lapply(1:2, function(x){
                                          column(12,
                                                 checkboxInput(paste0("ID", x), 
                                                               paste0("Checkbox", x), 
                                                               FALSE)
                                          )
                                        })
                                 ),
                                 column(8,
                                        lapply(1:4, function(x){
                                          column(3,
                                                 selectInput(paste0("ID", x), 
                                                             paste0("Select", x, ":"),
                                                             c("A" = "a",
                                                               "B" = "b",
                                                               "C" = "c")))
                                        })
                                 )
                          ),
                          column(12,
                                 column(4,
                                        lapply(1:6, function(x){
                                          column(12,    
                                                 selectInput(paste0("ID", x), 
                                                             paste0("Select", x, ":"),
                                                             c("A" = "a",
                                                               "B" = "b",
                                                               "C" = "c")
                                                 )
                                          )
                                        })
                                 ),
                                 column(width = 8,
                                        tabsetPanel(
                                          tabPanel(title = 'Tab1',
                                                   lapply(1:4, function(x){
                                                     column(width = 6,
                                                            plotOutput(paste0('plot', x))
                                                     )
                                                   })
                                          ),
                                          tabPanel(title = 'Tab2', 
                                                   lapply(5:8, function(x){
                                                     column(width = 6,
                                                            plotOutput(paste0('plot', x))
                                                     )
                                                   })
                                          ),
                                          tabPanel(title = 'Tab3',
                                                   lapply(9:12, function(x){
                                                     column(width = 6,
                                                            plotOutput(paste0('plot', x))
                                                     )
                                                   })
                                          )
                                        )
                                 )   
                          )              
                 ),

                 tabPanel("Tab 2"
                 ),
                 tabPanel("Tab 3"
                 ),
                 tabPanel("Tab 4"
                 )
)

server <- function(input, output, session) {

  lapply(1:12, function(x) {
    output[[paste0('plot', x)]] <- renderPlot({
      cars2 <- cars + rnorm(nrow(cars))
      plot(cars2)
    })
  })
}

shinyApp(ui, server)

Shiny Plot Height behaving different on different desktop

1 Answers1

Linked