Modal Dialog in Shiny: Can adjust width but not height

Question

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?

Answer 1

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