es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Establecer el ancho del modal de R Shiny cuando el tema está definido por bslib.

21 Jul, 2023 Programación

¿Cómo puedo establecer el ancho del modal al 80% cuando bs_theme() está activo? ¿Existe alguna posibilidad dentro de bs_theme()? No logro hacerlo funcionar correctamente con las etiquetas.

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", "abrir modal"),
)

server <- function(input, output) {
    observeEvent(input$open_modal, {
        showModal(
            modalDialog(
                title = "Este modal no tiene un ancho del 80%")
        )
    })
} 
shinyApp(ui = ui, server = server)
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para establecer el ancho del modal al 80% cuando bs_theme() está activo, puedes utilizar la función tags$style() para agregar tus propias reglas personalizadas de estilo CSS. Puedes agregar el siguiente código a tu código de interfaz de usuario (UI) después de la línea theme = bs_theme() para establecer el ancho del modal al 80%:

    tags$style('.modal-dialog { width: 80% !important; }')

    La palabra clave !important se utiliza para anular cualquier regla CSS en conflicto, de manera que se priorice el ancho del modal.

    Aquí está el código de la interfaz de usuario (UI) actualizado:

    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", "Abrir modal")
)

server <- function(input, output) {
  observeEvent(input$open_modal, {
    showModal(
      modalDialog(
        title = "Este modal tiene un ancho del 80%"
      )
    )
  })
}

shinyApp(ui = ui, server = server)

    Con este código, el ancho del modal se establecerá en un 80% cuando el tema “minty” esté activo.

Comments are closed.