闪亮的模态：宽度自动调整到里面的内容答案

【问题标题】：Shiny Modal: Having width adjust automatically to content inside闪亮的模态：宽度自动调整到里面的内容
【发布时间】：2019-03-15 13:08:34
【问题描述】：

我正在尝试让我的模态框根据里面的内容调整它的宽度。根据模态，我将有各种长度的按钮，我宁愿不为此格式化每个模态。

下面是我的代码：

library(shiny)
library (shinydashboard)

header <- dashboardHeader(title = "MRO Dash")
sidebar <- dashboardSidebar(actionButton("downloadBT", "Downloads", icon = icon("download")))

####FORMATTING MODAL HERE###
body <- dashboardBody(
  tags$head(tags$style("#test .modal-content {width: auto;}"))
  )
############################

ui <- dashboardPage(header, sidebar, body)

server <- function(input, output, session) {

  myModal <- function() {
    div(id = "test",
      modalDialog(downloadButton("download1","Download Shipments tonight let's go"),
                  br(),
                  br(),
                  downloadButton("download2","Download Shipments"),
                  easyClose = TRUE, footer = NULL)
    )
  }

  # open modal on button click
  observeEvent(input$downloadBT,
               ignoreNULL = TRUE,   # Show modal on start up
               showModal(myModal())
  )

  output$download1 <- downloadHandler(
    filename = function(){paste("MTD of SBU Shipments ",Sys.time(), ".csv", sep = "")},
    content = function(file){write.csv(, file, row.names = FALSE)}
  )

  output$download2 <- downloadHandler(
    filename = function(){paste("MTD of SBU Shipments ",Sys.time(), ".csv", sep = "")},
    content = function(file){write.csv(, file, row.names = FALSE)}
  )

}

shinyApp(ui, server)

对于模态，我知道有 3 个主要类我都试过了：

.modal-dialog：扩展框以适应屏幕的整个宽度（如预计）
.modal-content：什么都不做
.modal-body：什么都不做

不知道为什么{width: auto;} 不适用于这两个类。

【问题讨论】：

标签： css shiny modal-dialog shinydashboard

【解决方案1】：

我知道这已经过时了，但如果你没有弄清楚或者其他人正在寻找答案：

CSS：

.modal-dialog {
    width: fit-content !important;
}

将其硬编码到您的 R 闪亮应用中：

####FORMATTING MODAL HERE###
body <- dashboardBody(
  tags$head(tags$style("#test .modal-dialog {width: fit-content !important;}"))
  )
############################

【讨论】：