Skip to content

Introjs modal not working when scrolled down #55

@StanWijn

Description

@StanWijn

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions