How to add scroll bar and cross button to pop up window in shiny app?

Question

I want to have scroll bar to scroll up and down, cross button to close the pop up window and default of 10 records should display instead of 25 now.

I don't know how to write code for this.

library(shiny)
library(shinydashboard)
library(shinyjs)
library(shinyBS)

data <- iris

ui <- tagList(
  useShinyjs(),
  dashboardPage(
    dashboardHeader(title = "Telemedicine HP"),
    dashboardSidebar(),
    dashboardBody(
      fluidRow(
        div(id='clickdiv',
            valueBox(60, subtitle = tags$p("Attended", style = "font- 
size: 200%;"), icon = icon("trademark"), color = "purple", width = 4, 
href 
= NULL)
        )
      )
    )
  )
)

server <-  function(input, output, session){
  onclick('clickdiv', showModal(modalDialog(
    title = "Your title",
    renderDataTable(data)
  )))
}

shinyApp(ui, server)

By clicking on valuebox a pop up window will appear showing some tabular data. But that window should have a scroll bar, cross button in right top corner and records should be shown 10 by default instead of 25 showing now in top left corner of the pop up window.

Can anyone help me with this ?

Jaccar Jaccar · Accepted Answer · 2019-05-07T11:01:14

If your server part is like this, it is limited to 10 shown per page:

server <-  function(input, output, session){
  onclick('clickdiv', showModal(modalDialog(
    title = "Your title",
    renderDataTable(data, options = list(
      pageLength = 10, 
      scrollY = "400px"
    ))
  )))
}

I'm not sure I understand the need for the other parts. With 10 records, you don't need to be able to scroll up and down, but even when I set this to a lot of records (say 100), the normal page scroll bar works fine. And there is a button to dismiss the table already (although I appreciate it is not the cross in the corner you are requesting).

You can change other parts of your DataTable using the options - you can see some examples here.

Hope this helps!

EDIT: I've added an option for a vertical scroll bar. You can change the number to suit you.

If that doesn't work then you might be using a setup (for eg Mac) where scrollbars are hidden by default until you start scrolling.

How to add scroll bar and cross button to pop up window in shiny app?

1 Answers