如何将 Shiny modalDialog() 宽度调整为 DT 对象以完整显示 table 信息？

Question

我确实有一个 table，其宽度大于显示它的 modalDialog() 元素。我希望这个特定的 modialDialog()（我在应用程序中有其他我不想修改的）有足够的宽度来完全显示 DT 对象。

我尝试使用 modalDialog() 的 size = "l" 参数，但没有成功。有人可以帮我弄清楚这样做吗？奇怪的是，尽管有一些 css 影响所有模态的变化，我还是找不到任何线索。

下面是一个最小的例子：

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")
          )
        )
      )
    })
  }
)

Answer 1

遇到了类似的问题。我通过 css 更改来修复。尝试将 ui 更改为：

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

编辑： 您可以着手定义您自己的模态函数（我刚刚复制了 modalDialog 函数），因为原始函数不允许您将 class 添加到 modal-dialog。我只是将变量 idcss 粘贴到原始函数创建的 div 中。

此外，我只为一种模式做了 css。也为不好的 variable-names 和 input-names 感到抱歉（只是打了一个 s 使它们不同）。

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"
        )
      )
    })
  }
)

如何将 Shiny modalDialog() 宽度调整为 DT 对象以完整显示 table 信息？

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

r

modal-dialog

shiny