rintrojs icon indicating copy to clipboard operation
rintrojs copied to clipboard

Introjs modal not working when scrolled down

Open StanWijn opened this issue 2 years ago • 0 comments

I posted this issue on StackOverflow and already have a work-around, but if this issue is more common it might be useful to adress it. https://stackoverflow.com/questions/73232882/r-introjs-modal-not-working-when-scrolled-down/

We have a large shiny application that uses multiple horizontally stacked sections. On the last section (bottom of the page) I have a modal. Inside this modal I want to use rintrojs to guide the user. The introjs does not seem to work when the modal is opened at the bottom of the page. The grey overlay will show, but the elements are not highlighed or the button pop-up will show.

Example:

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)

StanWijn avatar Aug 08 '22 09:08 StanWijn