shiny: Carousel "jumps" when re-rendered with numeric height

[ismirsehregal]

Initially I came here due to this SO question and I thought, once the issues with the vignette are solved also the issues described there will be gone. However, they are still here using your latest commit.

Please consider the shiny app below (based on one of your examples). Once the radio button is switched, the new carousel is rendered below the old one:

Initially I thought it's the same "piling up" problem as in #51, but once I switch height = 100 to "25vh" in slickR it's working fine.

We've found a workaround using renderUI where height = 100 isn't causing the "jump".

library(shiny)
library(htmlwidgets)
library(slickR)

DF <- data.frame(fish = c(
  "https://www.hakaimagazine.com/wp-content/uploads/aquarium-reef-fish-banner.jpg",
  "https://www.hakaimagazine.com/wp-content/uploads/aquarium-reef-fish-banggai-cardinalfish.jpg",
  "https://www.sonomamag.com/wp-content/uploads/2016/12/fish.jpg"
),
butterfly = c(
  "https://www.futurity.org/wp/wp-content/uploads/2019/02/viceroy-butterfly_1600.jpg",
  "https://harvardforest.fas.harvard.edu/sites/harvardforest.fas.harvard.edu/files/butterfly_giant_swallowtail_model.jpg",
  "https://www.butterflyidentification.com/wp-content/uploads/2019/02/Doris-Longwing-Butterfly-Images.jpg"
),
bird = c(
  "http://www.cutepetname.com/wp-content/uploads/2018/11/funy-bird-names-feat-img.jpeg",
  "http://3.bp.blogspot.com/-mJ-Kw1mdLOo/UeLJx7vxsaI/AAAAAAAADkg/TfDHtuJnY7I/s1600/The-Cardinal-Bird.jpg",
  "https://images7.alphacoders.com/416/thumb-1920-416332.jpg"
))

ui <- fluidPage(slickROutput("mySlick", width = "50%"),
                radioButtons(
                  'series',
                  "Choose Series",
                  choices = c(
                    "fish" = "fish",
                    "butterfly" = "butterfly",
                    "bird" = "bird"
                  )
                ),
                textOutput("center"))

server <- function(input, output, session) {
  output$mySlick <- renderSlickR({

    cP2 <- JS(
      paste0("function(slick,index) {
      var dotObj = ", jsonlite::toJSON(DF[[input$series]]),";
          return '<a><img src= ' + dotObj[index] + '  width=100% height=100%></a>';
          }"))

    opts_dot_logo <-
      settings(
        initialSlide = 1,
        slidesToShow = 1,
        slidesToScroll = 3,
        centerMode = TRUE,
        focusOnSelect = TRUE,
        dots = TRUE,
        customPaging = cP2
      )

    slick_dots_logo <- slickR(obj = DF[[input$series]],
                              height = 100) + opts_dot_logo # "25vh" works fine

    slick_dots_logo
  })

  observeEvent(input$mySlick_current, {
    print(input$mySlick_current$.center)
  })

  output$center <- renderText({
    paste("Center:", input$mySlick_current$.center)
  })

}

shinyApp(ui, server)

[yonicd]

Thanks for bringing up this issue.

I never knew there were so many questions on SO for this package :)

I'll look into this

[ismirsehregal]

Yes - I think your package is quite popular. So far on SO a tag was missing I've created it a few days ago.

You might want to check this.

[yonicd]

so i saw that i on purpose wrote that the height and width are expected to be character. there are a few options to force this class

• use checkmate
• convert noncharacter to character with an assumed unit eg px

i'm leaning to option 1 would be easiest to implement and keep things unopinionated.