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

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

tags$head(tags$style(HTML('.modal-lg {宽度:1200 像素；}#abs_1 {背景颜色:白色；；}#clear {背景颜色:turquoise3;;}#disease{背景颜色:turquoise3;;}#bleach {背景颜色:turquoise3;;}#regionSelect{背景颜色:turquoise3;;}#yearSelect{背景颜色:turquoise3;;}#speciesSelect{背景颜色:turquoise3;;}')))

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

解决方案

你想修改modal-body的高度.试试这个:

库(闪亮)图书馆(闪亮的BS)闪亮的应用程序(ui = 基本页面(actionButton("show", "显示模式对话框"),标签$head(tags$style(".modal-dialog{ width:1000px}")),标签$head(tags$style(".modal-body{ min-height:700px}")),bsModal('boxPopUp', '测试','测试')),服务器=功​​能(输入，输出，会话){观察事件(输入$显示，{toggleModal(会话，boxPopUp"，toggle = toggle")})})

<小时><块引用>

在下面回答马克的评论

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

库(闪亮)图书馆(闪亮的BS)闪亮的应用程序(ui = 基本页面(actionButton("show1", "显示模式对话框"),actionButton("show2", "显示模态对话框"),tags$head(tags$style("#boxPopUp1 .modal-dialog{ width:1000px}")),标签$head(tags$style("#boxPopUp1 .modal-body{ min-height:700px}")),tags$head(tags$style("#boxPopUp2 .modal-dialog{ width:100px}")),标签$head(tags$style("#boxPopUp2 .modal-body{ min-height:100px}")),bsModal('boxPopUp1', '大','test'),bsModal('boxPopUp2', '小','测试')),服务器=功​​能(输入，输出，会话){观察事件(输入$show1，{toggleModal(会话，boxPopUp1"，toggle =toggle")})观察事件(输入$show2，{toggleModal(会话，boxPopUp2"，toggle =toggle")})})

In my Shiny app, I have several modal windows from the shinyBS package. I am able to adjust the width of these modal windows like so:

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;;}
                                                  ')))

And altering the number of pixels in the width argument changes the width of the modal windows. However, if I use height instead of width, altering the number of pixels has no effect on the height of the modal windows. Why might this be?

解决方案

You want to modify the height of the modal-body. Try this:

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

---

EDIT: Answer to Mark's comment below

Yes, you can use the id of the bsModal for that, see below. For example, the first style tag now applies for all div's with class .modal-dialog that are in a div with id boxPopUp1

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