daattali / shinyalert

🗯️ Easily create pretty popup messages (modals) in Shiny
https://daattali.com/shiny/shinyalert-demo/
Other
241 stars 26 forks source link

`shinywidgets` inputs are rendered awkwardly #73

Closed Alik-V closed 1 year ago

Alik-V commented 1 year ago

Hi @daattali, I have found that shiny widgets are rendered awkwardly inside the modals. Possibly related to #55. I would appreciate any suggestions on how to tackle this issue to preserve unmodified rendering appearance.

For example, here is how the elements look inside the modal: image

whereas this is their intended appearance outside of modal: image

The simplified UI below is placed in text = tagList() portion of shinyalert when htlm=TRUE.

  output[["some_ui_element"]] <- renderUI({
    list(
      pickerInput(
        inputId = "some_id",
        label = "Choose profiles to download",
        choices = c("Profile 1", "Custom named profile"),
        multiple = TRUE,
        options = list(`actions-box` = TRUE,
                       `live-search` = TRUE,
                       `noneSelectedText` = noneSelectedText),
       ),
      br(),
      actionBttn(
        inputId = "another_id",
        label = "Download selected profiles",
        style = "material-flat",
        color = "success",
        size = "sm",
        no_outline = FALSE
      )
    )
  })

I can write a full repex if it's helpful here!

daattali commented 1 year ago

Thanks for the report. This is indeed the same as #55 and doesn't really have a general solution. The underlying javascript library (sweetalert) includes a CSS file that is required, and that css file contains some rules that might interfere with other UI libraries. The modal is usually meant to be fairly simple and only include text or maybe a simple input, but if you want to include more complex UI in it, you'll have to manually sort out the CSS issues and write custom css to overwrite it.

Sorry there isn't a nice solution to this, but I'm closing this issue.