Background image and color changes timevis color

[pablo-rodr-bio2]

I found this problem while changing background colors of my shiny application. Problem is, timevis changes alternative columns color to the one that is on the background, when i want it to only have its normal color (white, I assume)

Example with background color:

library(shiny)
library(timevis)
library(bslib)

data <- data.frame(
  id      = 1:4,
  content = c("Item one"  , "Item two"  ,"Ranged item", "Item four"),
  start   = c("2016-01-10", "2016-01-11", "2016-01-20", "2016-02-14 15:00:00"),
  end     = c(NA          ,           NA, "2016-02-04", NA)
)

ui <- fluidPage(
  theme = bs_theme(bootswatch = "darkly"),
  timevisOutput("timeline")
)

server <- function(input, output, session){
  output$timeline <- renderTimevis({
    timevis(data)
  })
}

shinyApp(ui, server)

Example with background image:

library(shiny)
library(timevis)

data <- data.frame(
  id      = 1:4,
  content = c("Item one"  , "Item two"  ,"Ranged item", "Item four"),
  start   = c("2016-01-10", "2016-01-11", "2016-01-20", "2016-02-14 15:00:00"),
  end     = c(NA          ,           NA, "2016-02-04", NA)
)

ui <- fluidPage(
  tags$img(
    src = "https://coolbackgrounds.io/images/backgrounds/index/compute-ea4c57a4.png",
    style = 'position: absolute'
  ),
  timevisOutput("timeline")
)

server <- function(input, output, session){
  output$timeline <- renderTimevis({
    timevis(data)
  })
}

shinyApp(ui, server)

[daattali]

This isn't a "bug" in timevis, it's just a matter of CSS doing its job. It seems that the underlying timeline visualization (from https://visjs.github.io/vis-timeline/docs/timeline/) alternates the columns so that one is transparent and one is white. You can try to read the full documentation for it (https://visjs.github.io/vis-timeline/docs/timeline/) to see if it says anything about background changes, or you could try to play around with the CSS to figure out how to override it. But it's not a bug, and it isn't related to this package, so I'm closing the issue.