Sizing Issue (Flexdashboard)

[AdamLeckenby]

Hello,

Before I begin, can I just say thank you for this wonderful package!

Unfortunately, I'm coming across one small issue though I am unsure the exact cause. As you can see below when I run the document and use the inbuilt viewer, the carousel (vertical) displays at the correct image sizes, and scrolls vertically as intended.

Unfortunately, when I open it in the browser (internet explorer, edge, chrome) the images become stretched and only one is visible at a time? The same is true when I deploy to shinyapps.io. See below.

Here is the code:

I've also attached a .rmd file with a comparable layout should the layout be the issue (see test.zip) test.zip

###Institutes {data-width=200}

```{r, echo=FALSE}
ImgLogo = c("http://ukuniversitysearch.com/img/unilogo_310.png",
"http://www.polyomics.gla.ac.uk/images/uni_glasgow_logo.png",
"http://files.pluca.webnode.com/200000002-924a893448/UoB_logo.png","http://www.fitforworkeurope.eu/getimage.aspx.ID-351338.jpg",
"http://www.southampton.ac.uk/assets/imported/transforms/content-block/LinkImage/0E77997E85664C9CBB37D3BD08163288/ArthritisResearch_HZ_RGB_Logo_300dpi.jpg_SIA_JPG_fit_to_width_INLINE.jpg",
"http://spencerdubois.co.uk/images/made/85d3e9bce8919225/Arthritis_Research_Web-02_420_215_90_c1.jpg",
"http://cdn3.digitalartsonline.co.uk/cmsdata/features/3655443/nhs-logo-opener.png")

slickR(obj = ImgLogo, height="50",width="200",
       slickOpts = list(
         slidesToShow = 6,
         focusOnSelect = T,
         arrows=F,
         autoplay=T,
         centreMode=T,
         autoplaySpeed=750,
         vertical = T))

At a guess, maybe the slidesToShow option is not working? I would also like to centre the carousel within the box if possible?

Thanks!

Heres my sessioninfo()

 R version 3.3.2 (2016-10-31)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 7 x64 (build 7601) Service Pack 1

locale:
[1] LC_COLLATE=English_United Kingdom.1252  LC_CTYPE=English_United Kingdom.1252    LC_MONETARY=English_United Kingdom.1252
[4] LC_NUMERIC=C                            LC_TIME=English_United Kingdom.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
 [1] slickR_0.1.0      treemap_2.4-2     leaflet_1.1.0     viridisLite_0.2.0 highcharter_0.5.0 timevis_0.4       ggExtra_0.6      
 [8] DT_0.2.12         shiny_1.0.2       xts_0.9-7         ggrepel_0.6.5     crosstalk_1.0.1   zoo_1.7-14        readr_1.1.0      
[15] d3heatmap_0.6.1   dygraphs_1.1.1.4  flexdashboard_0.5 dplyr_0.5.0       mgcv_1.8-17       nlme_3.1-128      plotly_4.6.0     
[22] ggplot2_2.2.1    

loaded via a namespace (and not attached):
 [1] Rcpp_0.12.10       lubridate_1.6.0    lattice_0.20-34    tidyr_0.6.1        png_0.1-7          assertthat_0.2.0   rprojroot_1.2     
 [8] digest_0.6.12      psych_1.7.3.21     gridBase_0.4-7     mime_0.5           R6_2.2.0           plyr_1.8.4         backports_1.0.5   
[15] evaluate_0.10      httr_1.2.1         lazyeval_0.2.0     data.table_1.10.4  miniUI_0.1.1       TTR_0.23-1         Matrix_1.2-7.1    
[22] rmarkdown_1.4      stringr_1.2.0      foreign_0.8-67     htmlwidgets_0.8    igraph_1.0.1       munsell_0.4.3      broom_0.4.2       
[29] httpuv_1.3.3       base64enc_0.1-3    mnormt_1.5-5       htmltools_0.3.5    tibble_1.3.0       grid_3.3.2         jsonlite_1.4      
[36] xtable_1.8-2       gtable_0.2.0       DBI_0.6-1          magrittr_1.5       scales_0.4.1       rlist_0.4.6.1      quantmod_0.4-8    
[43] stringi_1.1.5      reshape2_1.4.2     xml2_1.1.1         RColorBrewer_1.1-2 tools_3.3.2        purrr_0.2.2        hms_0.3           
[50] rsconnect_0.7      yaml_2.1.14        parallel_3.3.2     colorspace_1.3-2   knitr_1.15.1      

I can't update to R 3.3.3 as this is a work station.

Please let me know if you require any additional information - thanks!

[yonicd]

Thanks for using the package!

you can wrap the slickR call in a container like below. That should fix the problem.

shiny::div(class='myWrapperDiv',style='height: 100px ; width= 100% ; padding-left: 40px',

slickR(obj = ImgLogo,height=50,width=200,
       slickOpts = list(
         slidesToShow = 6,
         focusOnSelect = TRUE,
         arrows=FALSE,
         autoplay=TRUE,
         centreMode=TRUE,
         autoplaySpeed=750,
         vertical = TRUE,
         adaptiveWidth=TRUE,
         adaptiveHeight=TRUE,
         verticalSwiping=TRUE))
)

I added a fix in the package to center the images within the slider. you can install it using devtools.

devtools::install_packages('metrumresearchgroup/slickR')

[AdamLeckenby]

This has fixed everything. Thank you very much!