carlganz / rintrojs

Wrapper for the Intro.js library
http://rintrojs.carlganz.com/
GNU Affero General Public License v3.0
133 stars 11 forks source link

shinydashboard sidebarMenu contrast #36

Closed teshomem closed 5 years ago

teshomem commented 5 years ago

Hi,

Good stuff. Why my sidebarMenu is not showing the content behind? It just shows white box.

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

ui <-
  dashboardPage(
    header = dashboardHeader(disable = FALSE),
    sidebar =
      dashboardSidebar(disable = FALSE,
                       introjsUI(),
tags$script(HTML("$('body').addClass('fixed');")),
                       sidebarMenu(
                         introBox(
                           selectInput("mylist",
                                       "List:",
                                       c("One",
                                         "Two",
                                         "Three"),
                                       selected = "One"),
                           data.step = 1,
                           data.intro = "This is an input",
                           actionButton("help", label = "help sidebar")
                         )
                       )),

    dashboardBody(fluidPage(actionButton("help", label = "help body")))
  )

server <- function(input, output, session) {
  observeEvent(input$help,
               introjs(
                 session,
                 options = list("nextLabel"="Forward",
                                "prevLabel"="Back",
                                "skipLabel"="Quit")
                 )
               )
}

shinyApp(ui, server)
carlganz commented 5 years ago

The Javascript console is giving error from this tags$script(HTML("$('body').addClass('fixed');")) and that is messing with jQuery and preventing introjs from working. Code works fine when the above code is removed, so this is outside scope of this package.

teshomem commented 5 years ago

For anyone who will encounter similar issue, i solved it by: getting the slimscroll jquery js file from http://rocha.la/jQuery-slimScroll, First install it then and copy the jquery.slimscroll.min.js file to your www/js directory then add tags$head(HTML("<script type='text/javascript' src='js/jquery.slimscroll.min.js'></script>")), in your ui.R