I am using an absolute panel with custom positioning. In chrome, the intro highlights the wrong position while firefox highlights the right position. I am using chrome v63 and Firefox v58. Below is a reproducible example similar to what I have currently setup.
library(shiny)
library(leaflet)
library(RColorBrewer)
library(scales)
library(lattice)
library(dplyr)
library(rintrojs)
# Choices for drop-downs
vars <- c(
"Is SuperZIP?" = "superzip",
"Centile score" = "centile",
"College education" = "college",
"Median income" = "income",
"Population" = "adultpop"
)
# Define UI for application that draws a histogram
ui <- fluidPage(
introjsUI(), # Load the rintrojs
# Sidebar with a slider input for number of bins
navbarPage("Testing", id="test",
div(class="outer",
# Load styling for absolute panel
tags$head(tags$style(HTML(
"
#controls {
/* Appearance */
background-color: white;
padding: 0 20px 20px 20px;
cursor: move;
/* Fade out while not hovering */
opacity: 0.65;
zoom: 0.9;
transition: opacity 500ms 1s;
}
#controls:hover {
/* Fade in while hovering */
opacity: 0.95;
transition-delay: 0;
}
"
))),
# If not using custom CSS, set height of leafletOutput to a number instead of percent
leafletOutput("map", width="1000", height="1000"),
# Shiny versions prior to 0.11 should use class = "modal" instead.
absolutePanel(id = "controls", class = "panel panel-default", fixed = TRUE,
draggable = TRUE, top = 60, left = "auto", right = 20, bottom = "auto",
width = 330, height = "auto",
h2("ZIP explorer"),
selectInput("color", "Color", vars),
selectInput("size", "Size", vars, selected = "adultpop"),
conditionalPanel("input.color == 'superzip' || input.size == 'superzip'",
# Only prompt for threshold when coloring or sizing by superzip
numericInput("threshold", "SuperZIP threshold (top n percentile)", 5)
),
plotOutput("histCentile", height = 200),
actionButton("help", "Help Button", icon=icon("question"))
)
)
)
)
# Generic Server Logic
server <- function(input, output, session) {
# Help introjs
steps <- data.frame(
element = c(NA, "#map", "#controls", "#histCentile"),
intro = c("NA works fine",
"Main element is fine",
"Absolute Panel is not centered",
"Element is not centered in chrome")
)
observeEvent(input$help, {
introjs(session, options = list(steps = steps))
})
}
# Run the application
shinyApp(ui = ui, server = server)
I am using an absolute panel with custom positioning. In chrome, the intro highlights the wrong position while firefox highlights the right position. I am using chrome v63 and Firefox v58. Below is a reproducible example similar to what I have currently setup.