How to add a horizontal and vertical scroll bar to R Shiny App to display a full plot by scrolling

Question

I have a question regarding adding a horizontal and vertical scroll bars to my R Shiny App to display a complete heatmap plot (382 rows and 800 columns). I managed to configure most of the features in the app, however I am confused and stuck how to add a scroll bars since only partial plots are being displayed. After going through few questions in Stack Overflow, I learnt that this issue could be related to html, css and javascript which I am not familiar and some suggested to try with adding options = list(scrollX = TRUE) or 'overflow-x': 'scroll', and 'overflow-y': 'scroll',for horizontal and vertical scroll bar. Please assist me with how the scroll bars can be added horizontally and vertically to view the complete heatmap plot.

Thank you,

Toufiq

Example code UI and Server code is provided below along with the example screenshot of the plot4:

Define UI

ui <- dashboardPage(skin = "green",
                    dashboardHeader(title = "Test") ,
                    dashboardSidebar(
                      sidebarMenu(
                        menuItem("MENU")
                      ),
                      sidebarMenuOutput("menu")
                      
                      
                    ),
                    dashboardBody(
                      tabItems(
                        tabItem("gridfingerprint",
                                fluidRow(
                                  
                                  box(width = NULL,solidHeader = TRUE,
                                      plotOutput("plot2", height = 500)
                                      
                                  ),
                                  fluidRow(
                                    
                                    box(width = NULL,solidHeader = TRUE,
                                        plotOutput("plot_map", height = 500))
                                  ),
                                  fluidRow(
                                    column(width = 4,
                                           box(width = NULL,status = "warning",
                                               downloadButton("gridplot",label = "Download image")
                                           )
                                    ),
                                    column(width = 3, offset = 1,
                                           box(width = NULL, status = "warning",
                                               downloadButton("downloadlist",label = "Download table")    
                                           ))
                                    
                                  )
                                )
                        ),
                        tabItem(tabName = "individualfingerprint", 
                                h5("Fingerprint heatmap displaying patterns of annotated modules across individual study subjects"),
                                fluidRow(
                                  box(width = 12,solidHeader = TRUE,
                                      plotOutput("plot4",height = 1200)
                                  ),
                                  fluidRow(
                                    column(width = 4,
                                           box(width = NULL,status = "warning",
                                               downloadButton("downloadindplot",label = "Download image")
                                           )
                                    ),
                                    column(width = 3, offset = 1,
                                           box(width = NULL, status = "warning",
                                               downloadButton("individualtable",label = "Download table")    
                                           ))
                                    
                                  )
                                )),
                        
                        tabItem("complexplot",
                                fluidRow(
                                  column(width = 12,
                                         box(width = NULL,solidHeader = TRUE,
                                             plotOutput("plot3",height = 800)),
                                         fluidRow(
                                           column(width = 4,
                                                  box(width = NULL,status = "warning",
                                                      downloadButton("aggregateplot",label = "Download image")
                                                  )
                                           ),
                                           column(width = 3, offset = 1,
                                                  box(width = NULL, status = "warning",
                                                      downloadButton("downloadaggregate",label = "Download table")    
                                                  ))
   
                                         )
                                  )
                                  
                                ))
                      )
                    )
)

Answer 1

I added the below code to the plot4 and this resolved the issue.

 fluidRow(
                                  box(width = 12,solidHeader = TRUE, (div(style='width:1400px;overflow-x: scroll;height:800px;overflow-y: scroll;',
                                      plotOutput("plot4",height = 1200, width = 2000)))