0
158
Vistasr introjs modal no funciona cuando se desplaza hacia abajo
Tenemos una gran aplicación brillante que usa múltiples secciones apiladas horizontalmente. En la última sección (parte inferior de la página) tengo un modal. Dentro de este modal, quiero usar rintrojs para guiar al usuario (dentro del modal).
La introjs no parece funcionar cuando se abre el modal en la parte inferior de la página. Se mostrará la superposición gris, pero los elementos no se resaltarán o se mostrará el botón emergente.
Aquí hay un ejemplo mínimo (editado de r introjs bsModal ):
library(rintrojs) library(shiny) library(shinydashboard) library(shinyBS) intro_df <- data.frame(element = c('#plot_box', '#bttn2_intro', '#box', '#plot', '#shiny-modal'), intro = c('test plot_box', 'test bttn2', 'test box', 'plot', 'test modal')) ui <- shinyUI(fluidPage( dashboardPage(dashboardHeader(title = "Test"), dashboardSidebar(sidebarMenu(menuItem("item1", tabName = "item1"))), dashboardBody(tabItems(tabItem("item1", rep(br(), 10000), # remove this line and introjs will work actionButton("bttn", "start intro"))))), introjsUI() )) server <- shinyServer(function(input, output, session) { output$plot <- renderPlot({ plot(rnorm(50)) }) output$plot_box <- renderUI({ box(id = 'box', div(id = "bttn2_intro", actionButton('bttn2', 'dummy')), plotOutput('plot'), width = '100%' ) }) observeEvent(input$bttn,{ showModal(modalDialog(uiOutput('plot_box'))) }) observeEvent(input$bttn2, { introjs(session, options = list(steps = intro_df)) }) }) shinyApp(ui = ui, server = server)Cualquier ayuda con este problema sería apreciada.
1 Respuestas
Responde la pregunta0
No es realmente una solución, pero puede obligar a la aplicación a desplazarse hacia arriba antes de que se muestre el modal y funcionará. La desventaja es que cuando el modal se cierra, necesitamos desplazarnos hacia abajo, para hacer eso, necesitamos un botón de acción que active estas acciones, por lo que la opción de usar el cierre fácil en el modal no funcionará en este caso.
APLICACIÓN
library(rintrojs) library(shiny) library(shinydashboard) library(shinyBS) library(shinyjs) intro_df <- data.frame( element = c("#plot_box", "#bttn2_intro", "#box", "#plot", "#shiny-modal"), intro = c("test plot_box", "test bttn2", "test box", "plot", "test modal") ) ui <- dashboardPage( dashboardHeader(title = "Test"), dashboardSidebar(sidebarMenu(menuItem("item1", tabName = "item1"))), dashboardBody( tabItems( tabItem( "item1", introjsUI(), shinyjs::useShinyjs(), rep(br(), 10000), # remove this line and introjs will work actionButton("bttn", "start intro") ) ) ) ) server <- shinyServer(function(input, output, session) { output$plot <- renderPlot({ plot(rnorm(50)) }) output$plot_box <- renderUI({ box( id = "box", div(id = "bttn2_intro", actionButton("bttn2", "dummy")), plotOutput("plot"), width = "100%" ) }) observeEvent(input$bttn, { shinyjs::runjs("window.scrollTo(0, 0)") showModal( modalDialog( uiOutput("plot_box"), footer = actionButton( "close_modal", "Dismiss" ), easyClose = FALSE ) ) }) observeEvent(input$bttn2, { introjs(session, options = list(steps = intro_df)) }) observeEvent(input$close_modal, { shinyjs::runjs("window.scrollTo(0, document.body.scrollHeight)") removeModal() }) }) shinyApp(ui = ui, server = server) 