CODEWITHSUNDEEP
rshinymodal-dialog
yeahman269
yeahman269

Reputation: 794

How to adjust Shiny modalDialog() width to a DT object to fully show the table information?

I do have a table with a width that is bigger than the modalDialog() element which display it. I would like this specific modialDialog() (I do have others in the app that I don't want to modify) to have a sufficient width to fully display the DT object.

I tried to use the size = "l" argument of modalDialog() without success. Could someone help me to figure out to do this? Strangely I was not able to find any clues on that despite some css changes that impact all modals.

Below a minimal example:

require(shiny)
require(DT)

shinyApp(
  ui = basicPage(
    actionButton("show", "Show modal dialog")
  ),
  
  server = function(input, output) {
    
    # Render DT
    output$dt <- DT::renderDT(cbind(iris, iris))
    
    # Modal management
    observeEvent(input$show, {
      showModal(
        modalDialog(
          size = "l",
          easyClose = T,
          
          DT::DTOutput("dt"),
          
          footer = tagList(
            modalButton("Cancel"),
            actionButton("ok", "OK")
          )
        )
      )
    })
  }
)

Upvotes: 8

Views: 6132

Answers (1)

mfindinge
mfindinge

Reputation: 177

Had a similar problem. I fixed by making css changes. Try changing your ui to:

ui = basicPage(
    tags$style(
      type = 'text/css',
      '.modal-dialog { width: fit-content !important; }'
    ),
    actionButton("show", "Show modal dialog")
  ),

EDIT: You could go about defining your own modal function (I just copied the modalDialog function) as the original does not let you add a class to the modal-dialog. I am simply pasting the variable idcss into the div created by the original function.

Furthermore I did the css only for one modal. Also sorry for the bad variable-names and input-names (just slapped an s on to make them differ).

require(shiny)
require(DT)

mymodal <- function (..., title = NULL, footer = modalButton("Dismiss"), 
          size = c("m", "s", "l"), easyClose = FALSE, fade = TRUE, idcss = "") 
{
  size <- match.arg(size)
  cls <- if (fade) 
    "modal fade"
  else "modal"
  div(id = "shiny-modal", class = cls, tabindex = "-1", `data-backdrop` = if (!easyClose) 
    "static", `data-keyboard` = if (!easyClose) 
      "false", div(class = paste("modal-dialog", idcss), class = switch(size, 
                                                          s = "modal-sm", 
                                                          m = NULL, 
                                                          l = "modal-lg"), 
                   div(class = "modal-content", 
                       if (!is.null(title)) 
                         div(class = "modal-header", tags$h4(class = "modal-title", 
                                                             title)
                             ), 
                       div(class = "modal-body", ...), 
                       if (!is.null(footer)) 
                         div(class = "modal-footer", footer))
                   ), 
    tags$script("$('#shiny-modal').modal().focus();"))
}


shinyApp(
  ui = basicPage(
    tags$style(
      type = 'text/css',
      '.modal-dialog.test{ width: fit-content !important; }'
    ),
    actionButton("show", "Show modal dialog"),
    actionButton("shows", "Show modal dialog2")
  ),
  
  server = function(input, output) {
    
    # Render DT
    output$dt <- DT::renderDT(cbind(iris, iris))
    
    # Modal management
    observeEvent(input$show, {
      showModal(
        mymodal(easyClose = T,
          
          DT::DTOutput("dt"),
          
          footer = tagList(
            modalButton("Cancel"),
            actionButton("ok", "OK")
          ),
          idcss = "test"
        )
      )
    })
    
    observeEvent(input$shows, {
      showModal(
        mymodal(easyClose = T,
                
                DT::DTOutput("dt"),
                
                footer = tagList(
                  modalButton("Cancel"),
                  actionButton("ok", "OK")
                ),
                idcss = "tests"
        )
      )
    })
  }
)

Upvotes: 11

Related Questions