rpivottable: drop down lists open in wrong position

Question

When clicking on drop down arrow, near grouping categories, the corresponding list opens on top of the page. (At first I thought it didn't work at all.). The correct position is next to the arrow, as shown in the picture.

rmarkdown reproducible example:

---
title: "rpivottable_test"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```

## R Markdown


`r stringi::stri_rand_lipsum(10)`


```{r cars}
library(rpivotTable)

data(mtcars)

```

## Including Plots

You can also embed plots, for example:

```{r pressure, echo=FALSE}
rpivotTable(mtcars,rows="gear", cols=c("cyl","carb"),width="100%", height="400px")
```

Here is session Info:

> sessionInfo()
R version 4.1.2 (2021-11-01)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19043)

Matrix products: default

locale:
[1] LC_COLLATE=Greek_Greece.1253 
[2] LC_CTYPE=Greek_Greece.1253   
[3] LC_MONETARY=Greek_Greece.1253
[4] LC_NUMERIC=C                 
[5] LC_TIME=Greek_Greece.1253    

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

other attached packages:
[1] rpivotTable_0.3.0

loaded via a namespace (and not attached):
[1] htmlwidgets_1.5.4 compiler_4.1.2   
[3] fastmap_1.1.0     htmltools_0.5.2  
[5] tools_4.1.2       knitr_1.36       
[7] digest_0.6.28     xfun_0.27        
[9] rlang_0.4.12 

Answer 1

** WIP answer, will remove when no longer making updates. **

Define the question.

Not exactly clear from the question as currently stated but there is your reproducible example (which demonstrates the incorrect visual format) and then the screenshot visual (which demonstrates the correct visual style).

And for reference, the correct visual style comes from the package vignette here

---

TLDR - a working answer

---
title: "rpivottable_test"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)

```

## R Markdown


`r stringi::stri_rand_lipsum(10)`


```{r cars, echo}
library(rpivotTable)

data(mtcars)

piv <- rpivotTable(mtcars,rows="gear", cols=c("cyl","carb"), elementId = "pvtTable")
htmlwidgets::saveWidget(piv, "pivot.html")
```

## Including Plots

You can also embed plots, for example:


## Answer

```{r pivot, echo=FALSE}
htmltools::includeHTML('pivot.html')
```

Explanation

• waves hands vaguely *

So, this is where I fall short and don't really understand the why because at face value, so far everything looks THE SAME.

Things I looked into:

• The version of htmltools & htmlwidgets
• The pvtUI & pvtFilterBox divs and css classes
• The html rendering options of Rmarkdown / knitr
• Rendering the document with runtime: shiny and wrapping the RpivotTable definition with a renderRpivotTable({ }) call
• The elementId option because maybe the css got orphaned from an unexpected base elementId??
• ??
• Current working theory - invalid style tag from Rmd in Vignette source line 907 is knitted into a link in example Rmd?

So. If you have any ideas to contribute on where to look next in Knitr, html, or other topics related to the above - please leave a comment!

Answer 2

I wish I found this question when it was asked. Sorry it took so long for you to get an answer.

So the future fix - I'll send the issue and my proposed solution to the Github maintainers of rpivotTable.

For now, you could use

devtools::install_github("fraupflaume/rpivotTable")

I knew it had something to do with the creation of the elements left and right. When I went looking if anyone else had this problem, I found that those that used React JS with pivottable.js filed a ticket in 2018 for a very similar issue. I didn't spend a whole lot of time looking for exactly what they changed, but it did tell me I needed to look at things from that JS package.

So I forked the rpivotTable repo and modified the js file located at

rpivotTable/inst/htmlwidgets/lib/pivottable/pivot.min.js

When the click function is attached it was using position() which gives you the position within the parent. Obviously, when this renders, it was using this as a page position.

I changed that function position() to offset() and wallah! It works.

In my repo, the script is "beautified" (courtesy of Atom's Beautify package). You'll see this change on line 745 in that script if you wanted to look at it.

I used your code for the RMD in the image, but I added names(mtcars)[10] to "George.Dontas."