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

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."