Not selecting wrapping div correctly

[kmorrisroe]

I am trying to highlight each box separately but there is a white bar across the entire fluidRow which messes up the comment location. Any idea to make it strictly highlight the box only for each step? I have wrapped it in a div and am using the ID. Also having this problem for valueBoxes as well.

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

header <- dashboardHeader(title = "rintroJS")
sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem("Test", tabName = "Test")
  ),
  div(style="display: inline-block; vertical-align: middle; margin-left: 28px;",
      actionButton("help","Walkthrough")
  )
)
body <- dashboardBody(
  introjsUI(),
  tabItem(tabName = "Test",
    fluidRow(
      div(id = "Box1",
          box(
            title = "Box 1", status = "primary", solidHeader = TRUE
          )
      ),
      div(id = "Box2",
          box(
            title = "Box 2", status = "primary", solidHeader = TRUE
          )
      )
    )
  )
)
ui <- dashboardPage(header, sidebar, body)

server <- function(input, output, session) {

  observeEvent(input$help, {
    introjs(session, options = list(
      steps = data.frame(element = c("#Box1",
                                     "#Box2"
                                     ),
                         intro = c("Comment 1",
                                   "Comment 2"
                                    ),
                         position = c("bottom",
                                      "bottom"
                                    )
      ),
      "nextLabel"="Next",
      "prevLabel"="Back",
      "skipLabel"="Quit")
    )

})
}
shinyApp(ui, server)

[carlganz]

HTML is frequently confusing so it is pretty easy to think a selector should work one way even though it doesn't.

Replace #Box1 with #Box1 .box and #Box2 with #Box2 .box so instead of selecting the div wrapper you select the div with class 'box' within the div wrapper.

[kmorrisroe]

Hey, semi-related question and may not be appropriate due to the fact that from above, it looks like it is not a bug but rather my lack of understanding of HTML. Can rintrojs pull a group of value boxes (not the whole row).

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

rm(list=ls())

###########/UI.R/#####################

header <- dashboardHeader(title = "TEST")
sidebar <- dashboardSidebar(
  sidebarMenu(id = "menuChoice",
              menuItem("Test", tabName = "TestMenu")
  ),
  div(style="display: inline-block; vertical-align: middle; margin-left: 48px;",
      actionButton("help","Walkthrough")
  )
)
body <- dashboardBody(
  introjsUI(),
  tabItem(tabName = "TestMenu",
        div(id = "RowTest",  
          fluidRow(
            div(id = "BoxTest",
                valueBoxOutput("Box1", width = 2),
                valueBoxOutput("Box2", width = 2),
                valueBoxOutput("Box3", width = 2)
            )
          )
        )
  )
)

ui <- dashboardPage(header, sidebar, body)

###########/server.R/#####################
server <- function(input, output, session) {

  output$Box1 <- renderValueBox({

    Box1 <- valueBox(value = paste0("95%"), subtitle = "Goal: 95%", icon = icon("plane"), color = "green", href = "#")
    Box1$children[[1]]$attribs$class <- "action-button"
    Box1$children[[1]]$attribs$id <- "Box1Link"
    return(Box1)
  })
  output$Box2 <- renderValueBox({

    Box2 <- valueBox(value = paste0("99%"), subtitle = "Goal: 95%", icon = icon("plane"), color = "green", href = "#")
    Box2$children[[1]]$attribs$class <- "action-button"
    Box2$children[[1]]$attribs$id <- "Box1Link"
    return(Box2)
  })
  output$Box3 <- renderValueBox({

    Box3 <- valueBox(value = paste0("97%"), subtitle = "Goal: 95%", icon = icon("plane"), color = "green", href = "#")
    Box3$children[[1]]$attribs$class <- "action-button"
    Box3$children[[1]]$attribs$id <- "Box1Link"
    return(Box3)
  })

  observeEvent(input$help, {
      introjs(session, options = list(
        steps = data.frame(element = c("#RowTest",
                                       "#BoxTest",
                                       "#Box1 .small-box"
                                      ),
        intro = c("Step on the entire fluid row. <b>This works</b>",
                  "Step on just the 3 individual boxes. <b>This does not work</b>",
                  "Step on individual box. <b>This works</b>"
                  ),
        position = c("bottom",
                     "bottom",
                     "bottom"
                      )
        ),
        "nextLabel"="Next",
        "prevLabel"="Back",
        "skipLabel"="Quit")
      )
  })

}

shinyApp(ui, server)

[carlganz]

It sounds like you want to highlight multiple distinct elements, which intro.js doesn't currently support: see https://github.com/usablica/intro.js/issues/456

[markhwhiteii]

I am running into a similar issue. The intro boxes show up at the top left of the screen, not around the inputs:

library(shiny)
library(rintrojs)

ui <- fluidPage(
  introjsUI(),
  br(),
  br(),
  br(),
  br(),
  br(),
  fluidRow(
    column(4, selectInput("select_letter", "Select:", letters)),
    column(4, selectInput("select_number", "Select:", 0:100)),
    column(4, actionButton("help", "?"))
  )
)

server <- function(input, output, session) {

  observeEvent(input$help, {
    introjs(session, options = list(steps = data.frame(
      element = c("#select_letter", "#select_number"),
      intro = c("select a letter", "select a number")
    )))
  })
}

shinyApp(ui = ui, server = server)

How can I have the intro boxes appear in the correct position?