Using the package `rintrojs` breaks the display of panels in a navbarPage

[bretauv]

I'm trying to do a presentation of my shiny app with the package rintrojs. This works well when I use it on actionButton or things like that but I would like to use it on the names of tabPanels.

I don't want to present something display in the panels, I want to have an intro box on the name of the panels. However, when doing this, the tabPanels do not display anymore. How should I do it?

Here's a reproducible example:

library(shiny)
library(rintrojs)

ui <- navbarPage(
  
  title = "foo",
  introjsUI(),
  tabPanel(
    introBox(title = "Panel 1",
             data.step = 1,
             data.intro = "This is Panel 1"),
    fluidRow(actionButton("button1", "Button 1"))
  ), 
  
  tabPanel(
    introBox(title = "Panel 2",
             data.step = 2,
             data.intro = "This is Panel 2"),
    fluidRow(actionButton("button2", "Button 2"))
  )

  # If you want to see a "normal" app, comment from "introjsUI()" to here, and uncomment the chunk below 
  # tabPanel(title = "Panel 1",
  #          fluidRow(actionButton("button1", "Button 1"))
  # ),
  # tabPanel(title = "Panel 2",
  #          fluidRow(actionButton("button2", "Button 2"))
  # )
)

server <- shinyServer(function(input, output, session) {
  
  introjs(session)
  
})

shinyApp(ui, server)

Also asked on StackOverflow

[raytong]

Hi @bretauv. You should code it like the following.

library(shiny)
library(rintrojs)

ui <- navbarPage(
  
  title = "foo",
  introjsUI(),
  tabPanel(
    title = introBox("Panel 1",
             data.step = 1,
             data.intro = "This is Panel 1"),
    fluidRow(actionButton("button1", "Button 1"))
  ), 
  
  tabPanel(
    title = introBox("Panel 2",
             data.step = 2,
             data.intro = "This is Panel 2"),
    fluidRow(actionButton("button2", "Button 2"))
  )
  
  # If you want to see a "normal" app, comment from "introjsUI()" to here, and uncomment the chunk below 
  # tabPanel(title = "Panel 1",
  #          fluidRow(actionButton("button1", "Button 1"))
  # ),
  # tabPanel(title = "Panel 2",
  #          fluidRow(actionButton("button2", "Button 2"))
  # )
)

server <- shinyServer(function(input, output, session) {
  
  introjs(session)
  
})

shinyApp(ui, server)```

[bretauv]

This works. However, the title of one panel has an icon (with icon = icon("plus") just after title = "..." for example) and I can't find a way to highlight both the icon and the title in the tour (note that it works if there is just the icon or just the title). Maybe you know how to fix this.

@raytong thank you anyway, post your solution on SO as well if you want

[raytong]

@bretauv. I didn't get what you mean. Can you show the code?

[bretauv]

@raytong sorry I thought that including an icon in the title of the tabpanel provoked a problem with the layout but it works fine, I must have done something wrong before.
See here for an example:

library(shiny)
library(rintrojs)

ui <- navbarPage(
  
  title = "foo",
  introjsUI(),
  tabPanel(
    title = introBox("Panel 1", icon("plus"),
                     data.step = 1,
                     data.intro = "This is Panel 1",
                     data.position = "top"),
    fluidRow(actionButton("button1", "Button 1"))
  ), 
  
  tabPanel(
    title = introBox(icon("minus"), "Panel 2",
                     data.step = 2,
                     data.intro = "This is Panel 2"),
    fluidRow(actionButton("button2", "Button 2"))
  )

)

server <- shinyServer(function(input, output, session) {
  
  introjs(session)
  
})

shinyApp(ui, server)