Set R shiny modal width when theme is defined by bslib

Question

How can I set the modal width to 80% when bs_theme() is active? Is there a possibility within bs_theme()? I just can't get it right with the tags.

library(shiny)
library(bslib)
ui <- fluidPage(
    shiny::bootstrapLib(),
    theme = bs_theme(
        version = 4,
        bootswatch = "minty"),
    tags$style(".modal-dialog{width: 80% !important;}"),
    actionButton("open_modal", "open modal"),
)

server <- function(input, output) {
    observeEvent(input$open_modal, {
        showModal(
            modalDialog(
                title = "This modal isn't 80% wide")
        )
    })
} 
shinyApp(ui = ui, server = server)

`modalDialog` has a `size` argument. The details can be found here: https://getbootstrap.com/docs/4.2/components/modal/#optional-sizes — markus, Dec 15 '21 at 21:58

score 2 · Accepted Answer · answered Dec 15 '21 at 22:18

2

Use tags$style(".modal-dialog {max-width: 80vw;}") instead. It makes sure your modal is always 80% of the entire window, resize automatically when you change window size.

answered Dec 15 '21 at 22:18

lz100

6,990
6
29

You can also specify which size to modify. For example, ".modal-lg {max-width: 80vw;}" affects modals with size = "l" but not "m" or "s". For "s" use .modal-sm, I'm not sure how to specify for "m". – christopho May 18 '23 at 19:08
There must be other class names for size m and s. `.modal-lg` is for large, so maybe m and s are `.modal-md` and `.modal-sm`. Just examples, check their documents for the actual names. – lz100 May 19 '23 at 21:18

Set R shiny modal width when theme is defined by bslib

1 Answers1