闪亮的模态对话框:可以调整宽度，但不能调整高度 [英] Modal Dialog in Shiny: Can adjust width but not height

问题描述

在我的Shiny应用程序中，我有ShinyBS软件包中的多个模式窗口.我可以像这样调整这些模态窗口的宽度:

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

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

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

---

回答马克在下面的评论

Answer to Mark's comment below

是的，您可以为此使用bsModal的ID，请参见下文.例如，第一个样式标签现在适用于ID为boxPopUp1

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

这篇关于闪亮的模态对话框:可以调整宽度，但不能调整高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！