Shiny 中的模态对话框：可以调整宽度但不能调整高度

Question

在我的 Shiny 应用程序中，我有几个来自 ShinyBS 包的模态窗口。我可以像这样调整这些模态窗口的宽度：

tags$head(tags$style(HTML('

                                                  .modal-lg {
                                                  width: 1200px;
                                                  }
                                                  #abs_1 {background-color: white;;}
                                                  #clear{background-color: turquoise3;;}
                                                  #disease{background-color: turquoise3;;}
                                                  #bleach{background-color: turquoise3;;}
                                                  #regionSelect{background-color: turquoise3;;}
                                                  #yearSelect{background-color: turquoise3;;}
                                                  #speciesSelect{background-color: turquoise3;;}
                                                  ')))

改变宽度参数中的像素数会改变模态窗口的宽度。但是，如果我使用高度而不是宽度，则更改像素数对模态窗口的高度没有影响。为什么会这样？

Answer 1

您想修改模态体的高度。尝试这个：

library(shiny)
library(shinyBS)
shinyApp(
  ui = basicPage(
    actionButton("show", "Show modal dialog"),
    tags$head(tags$style(".modal-dialog{ width:1000px}")),
    tags$head(tags$style(".modal-body{ min-height:700px}")),
    bsModal('boxPopUp', 'Test','test')


  ),
  server = function(input, output,session) {
    observeEvent(input$show, {
      toggleModal(session, "boxPopUp", toggle = "toggle")
    })
  }
)

编辑：回答马克在下面的评论

是的，你可以使用 bsModal 的 id，见下文。例如，第一个样式标签现在适用于所有类 .modal-dialog 的 div，这些 div 位于 id 为 boxPopUp1 的 div 中

library(shiny)
library(shinyBS)
shinyApp(
  ui = basicPage(
    actionButton("show1", "Show modal dialog"),
    actionButton("show2", "Show modal dialog"),
    tags$head(tags$style("#boxPopUp1 .modal-dialog{ width:1000px}")),
    tags$head(tags$style("#boxPopUp1 .modal-body{ min-height:700px}")),
    tags$head(tags$style("#boxPopUp2 .modal-dialog{ width:100px}")),
    tags$head(tags$style("#boxPopUp2 .modal-body{ min-height:100px}")),
    bsModal('boxPopUp1', 'Big','test'),
    bsModal('boxPopUp2', 'Small','test')


  ),
  server = function(input, output,session) {
    observeEvent(input$show1, {
      toggleModal(session, "boxPopUp1", toggle = "toggle")
    })
    observeEvent(input$show2, {
      toggleModal(session, "boxPopUp2", toggle = "toggle")
    })
  }
)