Блестящий модал: ширина автоматически подстраивается под содержимое внутри - PullRequest
Новая
       19

Блестящий модал: ширина автоматически подстраивается под содержимое внутри

0 голосов
/ 10 октября 2018

Я пытаюсь, чтобы мои модалы настраивали ширину в зависимости от содержимого внутри.В зависимости от модальности, у меня будут кнопки разной длины, и я бы предпочел не форматировать каждый модал для этого.

Ниже приведен мой код: 

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 классов.

...