size = 'xl' modal dialog is smaller than size = 'l'

[ismirsehregal]

I just tried to place a DT::datatable inside a modalDialog and realized that using size = 'l' results in more space than using size = 'xl'

library("shiny")
shinyApp(
  ui = basicPage(
    actionButton("show_l", "Show size = 'l' modal dialog"),
    actionButton("show_xl", "Show size = 'xl' modal dialog")
  ),
  server = function(input, output) {
    observeEvent(input$show_l, {
      showModal(modalDialog(
        title = "size = 'l' modal dialog",
        "This is a somewhat important message.",
        easyClose = TRUE,
        footer = NULL,
        size = "l"
      ))
    })
    observeEvent(input$show_xl, {
      showModal(modalDialog(
        title = "size = 'xl' modal dialog",
        "This is a somewhat important message.",
        easyClose = TRUE,
        footer = NULL,
        size = "xl"
      ))
    })
  }
)

---

> sessionInfo()
R version 4.2.0 (2022-04-22 ucrt)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19044)

Matrix products: default

locale:
[1] LC_COLLATE=German_Germany.utf8  LC_CTYPE=German_Germany.utf8    LC_MONETARY=German_Germany.utf8 LC_NUMERIC=C                   
[5] LC_TIME=German_Germany.utf8    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] shiny_1.7.1

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.8.3     digest_0.6.29    later_1.3.0      mime_0.12        R6_2.5.1         jsonlite_1.8.0   lifecycle_1.0.1  xtable_1.8-4     magrittr_2.0.3  
[10] cachem_1.0.6     rlang_1.0.2      cli_3.2.0        promises_1.2.0.1 jquerylib_0.1.4  bslib_0.3.1      ellipsis_0.3.2   tools_4.2.0      httpuv_1.6.5    
[19] fastmap_1.1.0    compiler_4.2.0   htmltools_0.5.2  sass_0.4.1

[gsmolinski]

I think this is the same as described in my PR here: Change size 'xl' of modalDialog to 'l' if Bootstrap 3.

Can you perhaps confirm that this happens only in Bootstrap 3? Problem is that in Bootstrap 3 the class uses for modal xl is not supported, so the default value is used and the default value for modal size is m.

The workaround would be something like this I think:

modalDialog(
      tags$script(HTML('
      if (jQuery.fn.tooltip.Constructor.VERSION.startsWith("3.")) {{
        if (document.getElementById("shiny-modal").children[0].classList.contains("modal-xl")) {{
          document.getElementById("shiny-modal").children[0].classList.remove("modal-xl");
          document.getElementById("shiny-modal").children[0].classList.add("modal-lg");
        }};
      }};
     '))
    )

Full example:

library("shiny")
shinyApp(
  ui = basicPage(
    actionButton("show_l", "Show size = 'l' modal dialog"),
    actionButton("show_xl", "Show size = 'xl' modal dialog")
  ),
  server = function(input, output) {
    observeEvent(input$show_l, {
      showModal(modalDialog(
        title = "size = 'l' modal dialog",
        "This is a somewhat important message.",
        easyClose = TRUE,
        footer = NULL,
        size = "l",
      ))
    })
    observeEvent(input$show_xl, {
      showModal(modalDialog(
        title = "size = 'xl' modal dialog",
        "This is a somewhat important message.",
        easyClose = TRUE,
        footer = NULL,
        size = "xl",
        tags$script(HTML('
      if (jQuery.fn.tooltip.Constructor.VERSION.startsWith("3.")) {{
        if (document.getElementById("shiny-modal").children[0].classList.contains("modal-xl")) {{
          document.getElementById("shiny-modal").children[0].classList.remove("modal-xl");
          document.getElementById("shiny-modal").children[0].classList.add("modal-lg");
        }};
      }};
     '))
      ))
    })
  }
)

[ismirsehregal]

@gsmolinski yes it seems to be the same (latest CRAN shiny). Your example works fine (resulting in a "l" modal when specifying "xl").

[lz100]

@gsmolinski Since you are checking Jquery already, one suggestion would be why not use some jq code instead, make it simpler:

(function(){
    if (!jQuery.fn.tooltip.Constructor.VERSION.startsWith("3.")) return; 
    let modal = $("#shiny-modal").children().first(); 
    if (modal.hasClass("modal-xl")) modal.removeClass("modal-xl").addClass("modal-lg");
})()