Issue With dynamic layout. introBox does not wrap UI element correctly

[kartikeyakirar]

Hi, I am working around the dynamic layout to show intro-boxes around UI element which can expand and collapse (shinydashboard::box) but once the sequence of the introJS steps starts and if the user changes layout e.g expand or collapse the box , IntorJS does not show on the correct position.

Here is a reproducible code. you can observe the button under uncollapsible box does not fit well under introJS box

library(rintrojs)
library(shiny)
library(shinydashboard)

ui <- shinyUI(
    dashboardPage(
        dashboardHeader(title = "Basic dashboard"),
        dashboardSidebar(
            introjsUI(),
            sidebarMenu(
                menuItem("Item1", tabName="item1", icon=icon("dashboard")),
                menuItem("Item2", tabName="item2", icon=icon("thumbs-up"))
            )
        ),
        dashboardBody(
            fluidPage(
                titlePanel("Old Faithful Geyser Data"),
                sidebarLayout(
                    sidebarPanel(
                        sliderInput("bins", "Number of bins:", min = 1, max = 50, value = 30),
                        actionButton("help", "Press for instructions"),
                    ),
                    mainPanel(
                        plotOutput("distPlot"),
                    )
                ),
                shinydashboard::box(id = "box1",
                                    title = "collapsed box",
                                    collapsible = T,
                                    collapsed = T,
                                    actionButton("btnShow","Intro ME")
                                   ),
                shiny_iconlink() 
            )
        )
    )
)

server <- shinyServer(function(input, output, session) {
    steps <- reactive(
        data.frame(
            element=c(".sidebar-menu", ".main-header", ".sidebar-toggle", ".active", "#help",".btn-box-tool", "#btnShow",".fa-info-circle"),
            intro=c(
                "This is a sidebar.",
                "This is a header.",
                "This is a button",
                "This is the active element of the sidebar.",
                "This is a button ",
                "This is button to expand the box",
                "This is intro btn",
                "action Link"
            ),
            position=c("right", "bottom", "bottom", "right", "top", "top","bottom","bottom")
        )
    )
    observeEvent(input$help,
                 introjs(session,
                         options = list(steps=steps(),
                                        "nextLabel"="Next",
                                        "prevLabel"="Previous",
                                        "skipLabel"="Skip"
                         ),
                         events = list("oncomplete"=I('alert("Done")'),                                       
                                       "onbeforechange" = I("if(this._currentStep == 6){
                                       $('#box1').closest('.box').find('[data-widget=collapse]').click();
                                       }"))
                 )
    )    
    output$distPlot <- renderPlot({
        x <- faithful[, 2]
        bins <- seq(min(x), max(x), length.out = input$bins + 1)
        hist(x, breaks = bins, col = 'darkgray', border = 'white')
    })
})

shinyApp(ui = ui, server = server) 

[carlganz]

Working with intros and dynamically generated elements in the DOM is hard. I'm not sure I have good solution for you

[kartikeyakirar]

@carlganz thanks for confirming.