闪亮的模态对话框:可以调整宽度,但不能调整高度 [英] 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屋!