如何将 Shiny modalDialog() 宽度调整为 DT 对象以完整显示表格信息? [英] How to adjust Shiny modalDialog() width to a DT object to fully show the table information?

问题描述

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

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.

我尝试使用 modalDialog() 的 size = "l" 参数但没有成功.有人可以帮我弄清楚如何做到这一点吗?奇怪的是，尽管一些 css 更改影响了所有模式，但我无法找到任何线索.

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

推荐答案

遇到了类似的问题.我通过进行 css 更改来修复.尝试将您的用户界面更改为:

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

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

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.

此外，我只为一个模态做了 css.也很抱歉糟糕的变量名和输入名(只是打了一个 s 使它们不同).

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

这篇关于如何将 Shiny modalDialog() 宽度调整为 DT 对象以完整显示表格信息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！