水平滾動表格上方的靜態文本以閃亮的

CSS

夏志豪1年前8瀏覽0評論

我有一個帶有rhandsontable的基本閃亮應用程序。表格很寬，因此在呈現輸出時，表格中有一個水平滾動。下面的例子:

enter image description here

現在，對于這個表，我想在表的最后4列上方顯示一個靜態內容，如下所示:

enter image description here

我面臨的問題是，當我向左滾動時，文字會跟著滾動。以下問題:

enter image description here

請仔細注意滾動相對于表格和文本的位置。重現問題的代碼如下:

if(interactive()) {
  library(shiny)
  library(rhandsontable)
  library(dplyr)
  
  ui <- fluidPage(br(),
                  br(),
                  
                  fluidRow(column(
                    12,
                    div(style = "text-align:right; margin-right:50px", "Show text here Only")
                  ),
                  column(12, rHandsontableOutput("mytable"))))
  
  server <- function(input, output, session) {
    output$mytable <- renderRHandsontable({
      data <-
        mtcars %>% cbind(mtcars) %>% cbind(mtcars) %>% cbind(mtcars) %>% head(10)
      rhandsontable(data, strecH = "all")
    })
    
  }
  
  shinyApp(ui = ui, server = server)
}

我不確定rhandsontable上是否有這方面的擴展，或者是否可以只使用css或javascript來解決這個問題。選項卡的寬度可以根據數據和各列的長度而變化。

任何幫助都將不勝感激！

這個解決方案部分有效。問題是表格的水平滾動條消失了，但是在屏幕的最底部有一個滾動條。

library(shiny)
library(rhandsontable)

ui <- fluidPage(
  br(), br(),
  div(
    style = "position: absolute;",
    div(
      style = "position: relative; width: auto; float: right;",
      tags$p(
        style = 
          "position: absolute; left: 80%; right: 0; top: 0; width: 150px; height: 50px; transform: translateX(-100%);", 
        "Show text here Only"
      ),
    ),
    div(
      style = "clear: right; height: 5px;"
    ),
    br(), br(),
    rHandsontableOutput("mytable")
  )      
)

server <- function(input, output, session) {
  output$mytable <- renderRHandsontable({
    data <-
      mtcars %>% cbind(mtcars) %>% cbind(mtcars) %>% cbind(mtcars) %>% head(10)
    rhandsontable(data, stretchH = "all")
  })
  
}

shinyApp(ui = ui, server = server)

編輯:工作方案！

library(shiny)
library(rhandsontable)

ui <- fluidPage(
  br(), br(),
  div(
    style = "border: solid 1px black; overflow-x: scroll;",
    div(
      style = "display: flex; flex-direction: column; width: fit-content;",
      div(
        style = "display: flex; flex-direction: row-reverse; overflow-x: hidden;",
        tags$p(
          "Show text here Only"
        )
      ),
      rHandsontableOutput("mytable")
    )
  )
)

server <- function(input, output, session) {
  output$mytable <- renderRHandsontable({
    data <-
      mtcars %>% cbind(mtcars) %>% cbind(mtcars) %>% cbind(mtcars) %>% head(10)
    rhandsontable(data) %>% hot_table(stretchH = "all", overflow = "hidden")
  })
  
}

shinyApp(ui = ui, server = server)

enter image description here