闪亮模式对话框:可以调整宽度,但不能调整高度



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

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

你想要修改模态体的高度。试试这个:

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

相关内容

最新更新