时间戳

首页 > 解决方案 > 如何将 Shiny modalDialog() 宽度调整为 DT 对象以充分显示表格信息？

r - 如何将 Shiny modalDialog() 宽度调整为 DT 对象以充分显示表格信息？

问题描述

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

我试图使用没有成功的size = "l"论点。modalDialog()有人可以帮我弄清楚这样做吗？奇怪的是，尽管有一些影响所有模式的 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")
          )
        )
      )
    })
  }
)

标签： rshinymodal-dialog

解决方案

有类似的问题。我通过更改 css 来修复。尝试将您的用户界面更改为：

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

编辑： 您可以定义自己的模态函数（我只是复制了 modalDialog 函数），因为原始函数不允许您向模态对话框添加类。我只是将变量 idcss 粘贴到由原始函数创建的 div 中。

此外，我只为一个模式做了 css。也很抱歉变量名称和输入名称不好（只是打了一个 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"
        )
      )
    })
  }
)

推荐阅读