闪亮模态:宽度可根据内部内容自动调整

Question

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

下面是我的代码：

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;}不适用于 2 个类。

Answer 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;}"))
)
############################