Drop down lists open in wrong position

[ghost]

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 

[ghost]

@smartinsightsfromdata Please help. This very useful package does not work as expected anymore. It's such a pity that R now lacks a solution for interactive pivot tables.

[timelyportfolio]

@gd047 Unfortunately I cannot re-create. See below for screencast.

[ghost]

@timelyportfolio Have you tried it with rmarkdown >= 2.11, htmltools =0.5.2 and htmlwidgets = 1.5.4 ?

[timelyportfolio]

@gd047 Ok, I see now when I update rmarkdown to most current. This is not an elegant solution, but if you place a <style> tag in the Rmd similar to below I think we restore the expected original behavior without any detrimental effects. I do not think it is necessary to isolate the css but if so we could do something like ramnathv/htmlwidgets#231.

style tag

<style>
  .rpivotTable {
    position: relative;
  }
</style>

[ghost]

@timelyportfolio Thank you very much. It really works. Nevertheless, I hesitate to use the package in new projects, because, as I see, it is not being maintained anymore. And I feel very sorry for that. It is the favorite widget of all those who use my web reports :-(

[fraupflaume]

You can fix this issue by modifying the file at inst/htmlwidgets/lib/pivottable/pivot.min.js

Where you have coded the creation of the click function for the element class pvtTriangle, you used the function position(). If you use offset(), it will fix this issue. I figured this out today answering an old Stack Overflow question (probably asked by gd047). You can see this question here. (There are two answers; my SO author name is "Kat".)

[ghost]

@fraupflaume Thank you once again :-)
I guess there is still some problem with the offset (in some cases..)

George D., Brani S.

[ghost]

@fraupflaume I think you can replicate the above problem if you change the output in yaml to this:

output:
  html_document:
    toc: yes
    toc_float:
      collapsed: true

[fraupflaume]

Alright, @gd047 I've updated my repository with a change and tried to break it in any way that I could think of. Please try to break it, again.

For the team at rpivotTable, as you already know, but perhaps don't have memorized, the element the click function for the UI filters is attached to is .pvtTriangle. it seems that no matter where I place rpivotTable(), the third offsetParent of elements with the class .pvtTriangle is the first offsetParent of the pop-up UI filters.

I'm sure there's a more elegant way to do this, but it works.... until @gd047 breaks it

b = t("<span>").addClass("pvtTriangle").html(" &#x25BE;").bind("click", function(e) {
            var n, r, a, r2;  // added r2
            r2 = t(e.currentTarget.offsetParent.offsetParent.offsetParent).offset() // collected third offsetParent offset
            return r = t(e.currentTarget).offset(), n = r.left - r2.left, a = r.top - r2.top, x.css({ // subtracted the new values
              left: n + 10,
              top: a + 10
            }).show()
          })